Lazy loading about swipe HOT 4 CLOSED

Content lazy loading is already possible, and I would suggest this feature remain outside of the core Swipe project. Swipe aims to provide the most simple, bare-bone carousel functionality, however as efficient as possible in fulfilling its primary mission (you can think of the single responsibility concept in computer programming).

Here's my suggestion: use a lazy-loading library (a library which is already very good at doing this task!). This way of dealing with the problem complies with the modularity principle (basically, build things in smaller autonomous pieces like building blocks rather than bloated packages).

I'll post an example below, hoping you'll be able to implement it yourself.

What we need

• A library/class that provides a method to load an image into an <img> element (we could build our own, but instead of reinventing the wheel we could reach for a library such as bLazy, which is a super small, very efficient, practical, cross-browser solution with a nice little API that I would recommend).
• A placeholder solution (taking care of un-loaded <img> elements, like setting the background in CSS and inserting a spinner — I'll leave this out of the example for the sake of brievety).

Let's do this. 😎

Example

HTML

We'll start with the base Swipe markup. Inside the <div> of each slide, I placed an <img> element with a blank source (a 1x1 base64 encoded gif), preserving the src attribute (just for semantics and remain W3C-compliant 😉). Our actual image URL will be contained in a custom attribute (data-src).

<div id="mySwipe" class="swipe">
  <div class="swipe-wrap">
    <div> <!-- slide 0 -->
      <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
           data-src="./my/image/url.ext">
    </div>
    <div> <!-- slide 1 -->
      <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
           data-src="./my/image/url.ext">
    </div>
    <div> <!-- slide 2 -->
      <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
           data-src="./my/image/url.ext">
    </div>
    <!-- ... -->
  </div>
</div>

JS

I will abstract the loading class to a LazyLoading constructor and assume each instance provides a load method which takes an image DOM element as an input.

// images collection, one per slide, could be achieved using a DOM selection library
var images = document.querySelectorAll('.swipe-wrap>div img');

// let's make sure everybody's first slide refers to the SAME slide
var myStartSlide = 0;

// create a new instance of our loading class
var myLoader = new LazyLoader();

// create a new Swipe instance as usual...
window.mySwipe = new Swipe(element, {
  startSlide: myStartSlide,
  callback: function(index, element) {
    // on slide change, load the image
    myLoader.load(images[index])
  }
  // ...
});

// on page load, load the first image of the slider
myLoader.load(images[startSlide]);

Implementation of the LazyLoader is left to the developer, though I recommend reaching out for an existing solution, especially if you want additional functionality. Here's what it could look like:

function LazyLoader() {
  return {
    load: function(elem) {
      elem.setAttribute('src', elem.getAttribute('data-src'));
    }
  };
} 

from swipe.

How are you on this @benoitchantre? I hope my solution isn't causing you too much overhead. It's basically just loading an image in the callback function, plus loading the first one on page load.

from swipe.

Thank you @loup-brun for the detailed explanation. I'll try in a few days to implement that in a few days.

from swipe.

Closing this as it's considered a use case question and will not be implemented as a feature in Swipe.

from swipe.