LazyLoad

or like that CodePen

It can be easily achieved with tiny change https://github.com/viljamis/ResponsiveSlides.js/pull/382

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?

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);                           
          }                                                                  

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.

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

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

+1

+1

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.

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.