图像前延迟加载Flexslider

Question

Hey guys im trying to lazy load my flexslider slide show on my website but Im running into a problem where all the images will load and appear on the site for a few seconds then the slider will load. I think this is happening because the slider is loads only after all the images are loaded. My website is a wordpress site and i loaded the flexslider in a few divs.

This is what it looks like before it loads:

I've tried using a script that supposedly loads the slider first before the images but that doesnt seem to work:

$(window).load(function() {
  $('.flexslider').flexslider({
    touch: true,
    slideshow: false,
    controlNav: true,
    slideshowSpeed: 7000,
    animationSpeed: 600,
    initDelay: 0,
    start: function(slider) { // Fires when the slider loads the first slide
      var slide_count = slider.count - 1;

      $(slider)
        .find('img.lazy:eq(0)')
        .each(function() {
          var src = $(this).attr('data-src');
          $(this).attr('src', src).removeAttr('data-src');
        });
    },
    before: function(slider) { // Fires asynchronously with each slider animation
      var slides     = slider.slides,
          index      = slider.animatingTo,
          $slide     = $(slides[index]),
          $img       = $slide.find('img[data-src]'),
          current    = index,
          nxt_slide  = current + 1,
          prev_slide = current - 1;

      $slide
        .parent()
        .find('img.lazy:eq(' + current + '), img.lazy:eq(' + prev_slide + '), img.lazy:eq(' + nxt_slide + ')')
        .each(function() {
          var src = $(this).attr('data-src');
          $(this).attr('src', src).removeAttr('data-src');
        });
    }
  });
});

Any help will be appreciated Thanks

Answer 1

So I couldn't figure out a clear cut strategy to lazy load the flex-slider on my site. The nature of my problem was that my pictures were loaded first before the flex-slider loaded. So a workaround for this problem would be to allow the images to be hidden until flex-slider is loaded.

I changed my CSS to:

#banner{display:none;}

I then added a javascript line that would show that id after the flex-slider was initialised.

jQuery('div#banner').show();

Now the site loads the rest of the content and then loads the flex-slider after.