Lazy loading images for flexslider

Flexslider is one of the most used sliders, for good reason. This snippet helps lazy load your images.

In order to create a perceived performance for users, we as authors shouldn’t allow the loading of every single image at once for sliders or carousels. In this snippet we only load the first and second image on init window load.

This perceived performance is a bit faster when we advance slides (the current slide also loads the next slide as you traverse). Make sure you don’t lazy load the first image of your slider.


<html>
<body>
<!-- Slider Markup -->
<section class="slider">
  <div class="flexslider">
    <ul class="slides">
      <li>
        <img src="your_image_link.jpg" alt="">
      </li>
      <li>
        <img class="lazy" data-src="your_image_link.jpg" alt="">
      </li>
      <li>
        <img class="lazy" data-src="your_image_link.jpg" alt="">
      </li>
      <li>
        <img class="lazy" data-src="your_image_link.jpg" alt="">
      </li>
      <li>
        <img class="lazy" data-src="your_image_link.jpg" alt="">
      </li>
    </ul>
  </div>
</section>

<!-- Scripts inserted before closing body tag of markup -->
<script src="jquery.flexslider.min.js"></script>
<script>
$(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');
        });
    }
  });
});
</script>
</body>
</html>

Flexslider Properties Documentation : https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties

Want to become a better web developer?

Join over 25,000 other developer & designers who get awesome links to the best news and articles each week delivered directly to their inbox.


This entry was posted in Uncategorized.

9 Comments

  1. This worked most excellently! Thank you

  2. Sorry for the dumb question, but how do I add this to my wordpress site? thanks a bunch.

  3. Awesome, this is exactly what i wanted. Thank you. You save my day.

  4. For use with the “animation: ‘slide'” option, I had to change current = index, to current = index + slider.cloneOffset, to account for the slide clones added by that effect.

  5. Hi,

    this is very interesting, but does somebody explain me how to use in a WordPress site using Flexslider? Where should I integrate this script?

    Thanks
    Simone

  6. Thanks for this smart piece of code. Just a question, this line :
    .find('img.lazy:eq(0)')
    should’nt be this one :
    .find('img.lazy:eq(1)')
    ?
    Because you have to select the second slide and no the first at this moment?

  7. Fantastic way of getting lazy load to work with Flexslider! Thanks for sharing!

  8. Thanks for your post.
    There is another way to solve this issue.
    I recommend using an extension called Lazy Load for Magento 2 which delays loading of images on your Magento site only when customers scroll down the page.
    You can try its demo here: https://goo.gl/cFVYUo

  9. sadsa

This post currently has 9 responses. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply

Your email address will not be published. Required fields are marked *