How do I integrate lazyload & bxslider together?
I want to lazily load images into a bxslider (or any slider like a control that allows a dynamic number of slides / images). I am using lazyload to load images lazily, but images in the slider are not lazy loaded. All images are loaded from 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?
ps I'm open to using any other slider control as long as it supports lazyloading.
source to share
I would suggest you try lazySizes . lazysizes automatically detects visibility changes so you don't need to write any JS code to integrate it with the slider.
All you have to do is replace src
with data-src
, add the lazyload class to your images, and add the lazysizes script to your page.
<img data-src="image.jpg" class="lazyload" />
Here are some examples:
And if you want to force image preloading, just add the class lazypreload
.
source to share
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);
});
source to share