jquery - Twitter 需要 Bootstrap 轮播优化解决方案

Question

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

Answer 1

您可以尝试在 slid 出现后设置“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 中积极设置项目容器的高度/宽度，因为浏览器不会加载图像。