Twittersブーストカットカルーセル最適化ソリューションが必要

Question

私は動作するブートストラップカルーセルを持っています。そして、私は、画像がユーザーに見える前であっても、事前にロードされていることに気付きました。私の問題は、カルーセルのループリストがあることです。ページの読み込みが遅くなります。要求されているイメージのみをロードする方法はありますか？ jquery経由ですか？

Answer 1

slidイベントが発生すると、「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> 

で

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

私は、ブラウザが画像をロードすることはありませんので、あなたは、CSSでのアイテムのコンテナの高さ/幅を設定することで積極的なことがしたいと思うと信じています。