How do I integrate lazyload & bxslider together?

Question

I want to lazily load images in the bxslider (or any slider like control, which allows dynamic number of slides/images). I'm using lazyload for loading images lazily, but the images in the slider isn't loading lazily. All the images are getting loaded with the pages :|. Here is my code,

<link href="jquery.bxslider.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="jquery.bxslider.js"></script>
    <script src="jquery.lazyload.js"></script>
    <script type="text/javascript" charset="utf-8">
    $(function() {

    $(":not(#hcontainer) img.lazy").lazyload({
        effect: "fadeIn"
      });

      $("img.lazy").lazyload({
        effect: "fadeIn",
        container: $("#hcontainer")
      });

    $('.bxslider').bxSlider({
      minSlides: 1,
      maxSlides: 3,
      slideWidth: 170,
      slideMargin: 10,
      pager: true
    });

    });
      </script>

    <style type="text/css">
    #hcontainer {
        height: 250px;
        overflow: hidden;
    }
    #inner_container {
          width: 900px;
        }
    </style>



    <div id="vcontainer">
      <div id="hcontainer">
        <div id="inner_container">
    <ul class="bxslider">
          <li><img class="lazy" src="1.jpg" data-original="1.jpg" alt="BMW M1 Hood"></li>   
    <li>      <img class="lazy" src="2.jpg" data-original="2.jpg" alt="BMW M1 Side"></li>
        <li>  <img class="lazy" src="3.jpg" data-original="3.jpg"  alt="Viper 1"></li>
        <li>  <img class="lazy" src="4.jpg" data-original="4.jpg" alt="Viper Corner"></li>
        <li>  <img class="lazy" src="5.jpg" data-original="5.jpg" alt="BMW M3 GT"></li>
        <li>  <img class="lazy" src="6.jpg" data-original="6.jpg" alt="Corvette Pitstop"></li>
    </ul>

        </div>
      </div>
      <br/>
      <img class="lazy img-responsive" data-original="2.jpg" width="465" height="574" alt="BMW M1 Side">
      <br/>
      <img class="lazy img-responsive" data-original="3.jpg" width="465" height="574" alt="Viper 1">
      <br/>
      <img class="lazy img-responsive" data-original="4.jpg" width="465" height="574" alt="Viper Corner">
      <br/>
      <img class="lazy img-responsive" data-original="5.jpg" width="465" height="574" alt="BMW M3 GT">
      <br/>
      <img class="lazy img-responsive" data-original="6.jpg" width="465" height="574" alt="Corvette Pitstop">
      <br/>
    </div>

What am I doing wrong?

p.s. I'm open to use any other slider control, if it supports lazyloading.

You still have images that uses the src attribute. For the layloading to work, you need to remove all src attributes. — muchwow, Jul 27 '15 at 13:59
I don't know, how to upload the bxslider and layload scripts :|. can you share a file host where I can upload these and add it to jsfiddle? — Abhishek, Jul 27 '15 at 14:31
I created this jsfiddle for you. I made some modifications and i think it should work. http://jsfiddle.net/7uj1z19k/ basically i removed all the src attributes and the $(":not(#hcontainer) img.lazy") call along with the container attribute of the second lazyload call. — muchwow, Jul 27 '15 at 14:44
It doesn't work, as removing the `src` attribute screws the bxslider :|. You can check the fiddle — Abhishek, Jul 27 '15 at 15:09
this post give tips on how to implement that https://github.com/stevenwanderski/bxslider-4/issues/118 I would recommend using their jsfiddle (at the bottom of the page) and modifying it with your images — muchwow, Jul 27 '15 at 16:08

score 4 · Answer 1 · answered Jul 27 '15 at 18:31

4

I would suggest, that you try lazySizes. lazysizes automatically detects visibility changes, so you won't need to write any JS code to integrate it with a slider.

Everything you need to do is to replace src with data-src, add the class lazyload to your images and add the lazysizes script to your page.

<img data-src="image.jpg" class="lazyload" />

Here are some examples:

And in case you want to force to preload an image, simply add the class lazypreload.

answered Jul 27 '15 at 18:31

alexander farkas

13,754
4
40
41

Nice one! Can you help me with adding touch swipe events to it? I mean, I was using bxslider because it handles mobile touch events implicitly. Can we do same thing here? – Abhishek Jul 28 '15 at 04:58
lazySizes also works with bxSlider out of the box. These examples are just examples. So just use bxSlider with lazySizes and your done. Although I think flickity is currently one of the best sliders. – alexander farkas Jul 28 '15 at 09:29

score 1 · Answer 2 · edited Dec 20 '18 at 13:59

You can use this code:

<div class="slider">
  <div>
    <img src="http://placekitten.com/400/200">
  </div>
  <div>
    <img class="lazy" src="http://www.llbean.com/images/spacer.gif" data-src="http://placekitten.com/450/200">
  </div>
  <div>
    <img class="lazy" src="http://www.llbean.com/images/spacer.gif" data-src="http://placekitten.com/500/200">
  </div>
</div>

$(function(){

    // create an options object to store your slider settings
    var slider_config = {
        mode: 'horizontal', // place all slider options here
        onSlideBefore: function($slideElement, oldIndex, newIndex){
            var $lazy = $slideElement.find(".lazy")
            var $load = $lazy.attr("data-src");
            $lazy.attr("src",$load).removeClass("lazy");
        }
    }
    // init the slider with your options
    var slider = $('.slider').bxSlider(slider_config);
});

How do I integrate lazyload & bxslider together?

2 Answers2