今回紹介するのは１ページが長めなブログやギャラリーサイトに役立つ遅延ローディングを実現するスクリプトです。
遅延ロードを実現するのは沢山ありますが、デバイスサイズによって小さい画像と大きい画像を振り分けられるところがいいなと思いました。
用意するもの
まずは公式から一式をダウンロードしましょう。
その中から最低限必要なものは…というかダウンロードできるのはblazy.min.jsだけですね。読み込むものはこれだけです。
<script src="js/blazy.min.js" type="text/javascript"></script>
基本的な使い方
これを読み込んだら遅延ロードさせたいimgタグを下記のように記述します。
<img class="b-lazy" src="loading.gif" data-src="large.jpg" data-src-small="small.jpg">
srcにはローディング用の画像パス、data-srcには通常サイズの画像パス、data-src-smallにはスマホ用（デバイスサイズが小さい用）の画像パス、といった感じで入力します。
そしてページ最下部、もしくはページload時に発火するよう以下のスクリプトを記述。
breakpointsは、imgが表示される領域のサイズではなくデバイスサイズによって振り分けがされるようです。PCだとウィンドウサイズを縮めても反応せず、開発者ツールでUA変えてみたら反応しました。
var bLazy = new Blazy({
breakpoints: [{
width: 420 , //ここで振り分けるデバイスサイズを指定
src: 'data-src-small' //指定デバイスサイズの際に割り振る属性を指定
}],
success: function(element){
setTimeout(function(){
//ローディング成功時に発火させる必要があるスクリプトを記述
}, 200);
}
});
使い方も簡単ですしサクサク動くので使い勝手が良さそうなプラグインですね。
