jquery - 需要 Twitters boostrap 轮播优化解决方案

Question

我有一个工作引导轮播。而且我刚刚意识到，甚至在用户可见之前，图像就已经被提前加载了。我的问题是我有一个循环的轮播列表。使我的页面加载缓慢。有没有办法只加载被请求的图像？通过jQuery？

Answer 1

滑动事件发生后，您可以尝试设置“src” 。

$(".carousel").bind("slid", function(){
 $img = $(".active img", this)
 $img.attr("src", $img.data('lazy-load-src'))
}

使用 HTML

<div class="carousel-inner">
  <div class="active item"><img data-lazy-load-src="/imgs/test.png"/></div>
  <div class="item"><img data-lazy-load-src="/imgs/test2.png"/></div>
  <div class="item"><img data-lazy-load-src="/imgs/test3.png"/></div>
</div>

我相信你会想要积极地在 CSS 中设置项目容器的高度/宽度，因为浏览器不会加载图像。