Moral Hazard!!

画像をスライドさせるjQueryスライダー「bxslider」。画面サイズに合わせて拡大縮小機能もついているので、非常に便利で私もよく使っております。

ただ横幅一杯に使う場合はどうしても画像が大きくなりがちで、その場合ページの読み込みに時間がかかり、一瞬2枚目以降の画像が表示されてしまうことがあります。

これを簡単に解決するためは、jQueryで2枚目以降の画像を表示する時間を遅らせます。

html

<ul class="bxslider">
	<li><img id="img1" src="http://test.com/test1.jpg" /></li>
	<li><img id="img2" src="http://test.com/test2.jpg" /></li>
	<li><img id="img3" src="http://test.com/test3.jpg" /></li>
</ul>

css

#img2, #img3 {
display:none;
}

jQuery

$(document).ready(function(){
  $('.bxslider').bxSlider({
	  auto: true,
	  controls: false,
	  autoHover: true,
	  pager: false,
	  speed: 1200,
	  pause: 6000,
	  mode: 'fade'
  });
$('#img2,#img3').delay(3000).css('display','block');
});

要は
「最初2枚目以降の画像を非表示にして、サイトが読み込まれるまで待ってから表示」
するって形。
具体的には

1, 指定画像(ここでは#img2,#img3)を最初display:noneで非表示にしておく
2, delayで数秒後(ここでは3000=3秒)に表示させる

※wordpressの場合はカプセル化するか、$をjQueryに変更。

Tweet