javascript - How do I integrate lazyload & bxslider together? - Stack Overflow

admin管理员组

文章数量:1334132

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=".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.

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./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.

• javascript
• jquery
• bxslider
• jquery-lazyload
• lazy-loading

Share Improve this question Follow edited Jul 27, 2015 at 13:46 Abhishek asked Jul 27, 2015 at 13:13 AbhishekAbhishek 7,0451414 gold badges6161 silver badges8989 bronze badges 7

• 1 You still have images that uses the src attribute. For the layloading to work, you need to remove all src attributes. – muchwow Commented Jul 27, 2015 at 13:59
• If I remove src then bxslider isn't loading images :| – Abhishek Commented Jul 27, 2015 at 14:11
• can you make a js fiddle so we can play around with it? – muchwow Commented Jul 27, 2015 at 14:25
• 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 Commented Jul 27, 2015 at 14:31
• I created this jsfiddle for you. I made some modifications and i think it should work. jsfiddle/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 Commented Jul 27, 2015 at 14:44

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 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:

• lazySizes with flickity
• lazysizes with flickity 2
• lazysizes with flexslider
• lazysizes with isotope

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

You can use this code:

<div class="slider">
  <div>
    <img src="http://placekitten./400/200">
  </div>
  <div>
    <img class="lazy" src="http://www.llbean./images/spacer.gif" data-src="http://placekitten./450/200">
  </div>
  <div>
    <img class="lazy" src="http://www.llbean./images/spacer.gif" data-src="http://placekitten./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);
});

本文标签： javascriptHow do I integrate lazyload amp bxslider togetherStack Overflow