Flexslider lazyloading - only load an image when i

Question

This is really only following on from an answer to Flexslider lazyloading here I am using that code which I Have pasted below. I would like to alter it so that images only loaded when truly needed.

I tried the other Flexslider properties, before: and after: but they created a delay on the first slide? Please can I get some help with this.

$('#slider').flexslider({
start: function (slider) {
   // lazy load
   $(slider).find("img.lazy").each(function () {
      var src = $(this).attr("data-src");
      $(this).attr("src", src).removeAttr("data-src");
   });
 }
});

Answer 1

If you not only want lazy loading but preloading the following slides you should change the solution from Brownrice to

$(window).load(function() {
    $('#sld-auto-930').flexslider({
        // put your settings properties here
        start: function (slider) {
            // preloading the second slide on initialization
            var slides = slider.slides,
            $slide = $(slides[1]),
            $img = $slide.find('img[data-src]');
            if($img){
                $img.attr("src", $img.attr('data-src')).removeAttr("data-src");
            }
        },
        after: function (slider) {       
            //instead of going over every single slide, we will just load the next immediate slide
            var slides = slider.slides,
            index = slider.animatingTo+1,
            $slide = $(slides[index]),
            $img = $slide.find('img[data-src]');
            if($img){
                $img.attr("src", $img.attr('data-src')).removeAttr("data-src");
            }
        }
    });
});

with this code the second slide will be preloaded during page load and every following slide will be preloaded when the previous slide is active.

Answer 2

I had a similar problem. My sollution is not perfect, but you could do something like this:

start: function(slider){
    var slcount = slider.count-1;
    $(slider).find("img.lazy:eq(0), img.lazy:eq(1), img.lazy:eq(" + slcount + ")").each(function () {
        var src = $(this).attr("data-original");
    $(this).attr("src", src).removeAttr("data-original");
});
},
before: function(slider) {
    var nxtslide = slider.currentSlide+1;
    var prvslide = slider.currentSlide-1;
    $('.flexslider .flex-active-slide').parent().find('img.lazy:eq(' + slider.currentSlide + '), img.lazy:eq(' + nxtslide + '), img.lazy:eq(' + prvslide + ')').each(function () {
        var src = $(this).attr("data-original");
        $(this).attr("src", src).removeAttr("data-original");
    });
}

On start it loads the first image, the second and the last one. On before it loads the current image, the next and the previous one, so the next pictures are always preloaded. The variables currentSlide and count are provided by flexsliders callback API.

Answer 3

I got some help in the end, here we have less code :)

Jquery:

$(window).load(function() {
 $('#sld-auto-930').flexslider({
  // put your settings properties here
  after: function (slider) {       
  //instead of going over every single slide, we will just load the next immediate slide
  var slides = slider.slides,
      index = slider.animatingTo,
      $slide = $(slides[index]),
      $img = $slide.find('img[data-src]');
      if($img){
      $img.attr("src", $img.attr('data-src')).removeAttr("data-src");
     }
}
});

HTML:

if($i > 0) {
    echo '<img class="lazy'.$i.'"src="" data-src="'.$src.'" alt="'.$alt.'">';
 }else {
    echo '<img class="first'.$i.'"src="'.$src.'"  alt="'.$alt.'">';                         }       
$i++;