jquery - Twitter のブーストラップ カルーセル最適化ソリューションが必要

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でアイテムコンテナの高さ/幅を積極的に設定することをお勧めします。