LazyLoad

[acollis]

Firstly, thank you for implementing the last feature I wrote to you about (Pause on Hover).

Something I've been trying to (unsuccessfully) implement is a Lazy Load for images in each Slide.

Do you have any plans to implement something to that matter that uses the standard data-original to src method?

[fspoettel]

I thought of it too, tried the before&after calls but without success. This is really interesting since it would improve mobile UX a lot.

[restlessmedia]

I've though about this too. One thing that might work is to allow the first page to load normally then hook into a library initEnd routine to manually pre-load the rest of the pages. So after the closing brace of if($slide.size() > 1) trigger an end event that denotes the completion of the initialization routine. Within this event, bind the rest of the hidden pages in order. It could be tweaked to only allow the cycle to continue if the next page to display had loaded.

[guyisra]

+1

[mgkz]

+1

[gzlatkoff]

Someone tried the method proposed by restlessmedia? Need to figure this out...

[restlessmedia]

I'll try and have a go at this tonight.

[yeahdino]

I'm no developer, but I got lazyloading working using this plugin: https://github.com/luis-almeida/unveil

Setup Unveil, and then in the responsiveSlides.js find this segment: // Go to slide slideTo($(this)[0] === $prev[0] ? prevIdx : nextIdx);, put this line underneath$(this)[0] === $prev[0] ? current.eq(prevIdx-1).trigger("unveil"): current.eq(nextIdx+1).trigger("unveil");, and add this to the list of vars just above: current = $slide.find("img");. I'm sure this can be done better, but hey, it works.

[nishantjr]

I used the before callback and got it working - though it breaks loading of images for browsers that don't have javascript, and requires you to specify the image as <img data-source='image.jpg'>.

          before: function() {                                               
            /* Allow the images to be loaded only when needed. */            
            var image = $(this).find("img");                                 
            var source = image.data('source');                               
            if (source) image.attr("src", source);                           
          }                                                                  

[sheriffderek]

@nishantjr I had taken that approach recently, but now I'm doing it on a new project and it's not working the way I expect. I've taken your code and put it in a CodePen. Any ideas how to access the current slide in the before and after hooks?

[asolopovas]

It can be easily achieved with tiny change #382

[asolopovas]

or like that CodePen