[英]How do I integrate lazyload & bxslider together?
I want to lazily load images in the bxslider (or any slider like control, which allows dynamic number of slides/images). 我想懒洋洋地加载bxslider中的图像 (或任何像控件一样的滑块,它允许动态数量的幻灯片/图像)。 I'm using lazyload for loading images lazily, but the images in the slider isn't loading lazily. 我正懒惰地使用lazyload来加载图像,但是滑块中的图像没有懒散地加载。 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? 我究竟做错了什么?
ps I'm open to use any other slider control, if it supports lazyloading. ps我打开使用任何其他滑块控件,如果它支持延迟加载。
I would suggest, that you try lazySizes . 我建议你尝试lazySizes 。 lazysizes automatically detects visibility changes, so you won't need to write any JS code to integrate it with a slider. lazysizes自动检测可见性更改,因此您无需编写任何JS代码即可将其与滑块集成。
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. 您需要做的就是用data-src
替换src
,将类lazyload添加到您的图像并将lazysizes脚本添加到您的页面。
<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
. 如果您想强制预加载图像,只需添加类lazypreload
。
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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.