我正在使用bootstrap carousal,幻灯片中有一些我需要延迟加载的图片。 我使用的GIF并不是懒惰的装载。 我正在使用 http://www.appelsiini.net/projects/lazyload此插件用于延迟加载 可以有任何问题。 我在控制台上看不到任何错误。
$("img.lazy").lazyload();
$('#carousel-custom').on('slide.bs.carousel', function(e) {
$("img.lazy").lazyload();
});
和html标记
<div id='carousel-custom' class='carousel slide' data-ride='carousel'>
<div class='carousel-outer'>
<!-- Wrapper for slides -->
<div class='carousel-inner'>
<div class='item active'>
<div class="container-fluid">
<div class="col-md-12 col-sm-12 col-xs-12 text-center lazy-img-container pull-right">
<img alt="img" src="/assets/gifs/icon-Engage.gif" class=" lazy" />
<img alt="img" src="/assets/gifs/icon-Identify.gif" class=" lazy" />
<img alt="img" src="/assets/gifs/icon-Profit.gif" class=" lazy" />
</div>
</div>
</div>
<div class='item'>
<div class="container-fluid">
<div class="col-md-12 col-sm-12 col-xs-12 text-center lazy-img-container pull-right">
<img alt="img" src="/assets/gifs/icon-Engage.gif" class=" lazy" />
<img alt="img" src="/assets/gifs/icon-Identify.gif" class=" lazy" />
<img alt="img" src="/assets/gifs/icon-Profit.gif" class=" lazy" />
</div>
</div>
</div>
<div class='item'>
<div class="container-fluid">
<div class="col-md-12 col-sm-12 col-xs-12 text-center lazy-img-container pull-right">
<img alt="img" src="/assets/gifs/icon-Engage.gif" class=" lazy" />
<img alt="img" src="/assets/gifs/icon-Identify.gif" class=" lazy" />
<img alt="img" src="/assets/gifs/icon-Profit.gif" class=" lazy" />
</div>
</div>
</div>
</div>
</div>
<!-- Indicators -->
<ol class='carousel-indicators'>
<li data-target='#carousel-custom' data-slide-to='0' class='active'>
</li>
<li data-target='#carousel-custom' data-slide-to='1'>
</li>
<li data-target='#carousel-custom' data-slide-to='2'>
</li>
</ol>
</div>