個人的にはあまりbxSlider使いたいなぁーとは思わなけど、仕事で仕方なく使う感じ。
ただ、画像が大量にある場合に、一気に画像画像を読み込みに行くので辛くなるんだよね。。。

ということでlazy load出来るようにしてみた。

今回のサンプルについて

polidog/lazy-bxslider

githubで公開しています。

  • index.html: bxSliderの遅延ロードサンプル
  • lazy.html: 画像の遅延読み込みのサンプル

画像の遅延ロードってどう実装すればいいのか？

まず最初に疑問に思ったことは、画像の遅延ロードってどうやればいいのか？ これは結構単純で必要になった時点でimgタグのsrcに画像のURLを設定すればいい。

lazy.htmlを見てもらえれば理解出来ると思う。

bxSliderで実現するには？

次の画像へ移るタイミングで先程のように画像を取得すればいい。
onSlideBeforeというコールバックに遅延ロード処理を買えばいい。 onSlideBeforeは、スライドが開始する前に実行されるので、このタイミングいいともう。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

$('.bxslider').bxSlider({
...
  onSlideBefore: function(e) {
    $($(e[0]).find('.lazy')).each(function(index,value){
      var $target = $(value);
      $target.attr('src', $target.data('src'))
      $target.removeClass('lazy')
    });
  }
});

html側にはlazyクラスとdata-srcに画像のURLを指定する。
ただし、一番最初に表示させる画像に関しては遅延ロードさせる必要もないので、lazyクラスを指定せずsrcに画像のURLを指定する。

1
2
3
4
5
6
7
8

<ul class="bxslider">
  <li><img src="images/sample1.jpg" class="img-responsive lazy" /></li>
  <li><img data-src="images/sample2.jpg" class="img-responsive lazy" /></li>
  <li><img data-src="images/sample3.jpg" class="img-responsive lazy" /></li>
  <li><img data-src="images/sample4.jpg" class="img-responsive lazy" /></li>
  <li><img data-src="images/sample5.jpg" class="img-responsive lazy" /></li>
  <li><img data-src="images/sample6.jpg" class="img-responsive lazy" /></li>
</ul>

最後に

あまり個人的にbxSliderはおすすめしないけれど、bxSliderでも簡単に遅延ロードが出来るので大量に画像を表示する時は是非使ってみるといいかと思う。