スクロール時に画像の読み込みを開始する Lazyload
今までの a-blog cms では jQuery のバージョンが 1.2.6 という事で、最新のプラグイン的なものが動作しないでいたので、あまり導入のチャレンジをしていませんでしたが、a-blog cms 1.3.0 になって jQuery も最新版になった事から気にせず使えるようになったのが、とても嬉しいですね。
今回のエントリーでは、jQueryのプラグインで見えてない部分は画像の読み込みをしないでおいて、スクロールして表示されるようになってから読み込む「Lazyload.js」というのを試してみましたので、その実装方法をメモっておきます。
以前は jquery.dimensions.js というものが必要だったようですが、jQuery に含まれる事になったようで、現在のバージョン(1.4.2) では読み込まなくても問題なく動作するようです。
<script type="text/javascript" src="js/jquery.lazyload.js"></script>
<script type="text/javascript">
$(function() {
$("img").lazyload({
placeholder: "images/lazyDummy.gif",
effect : "fadeIn"
});
});
</script>上記のような感じで書く事で見えてない部分が見えるようになった時に、フェードインで表示されます。最初、このフェードインの設定が無かったら動いてるかどうか分かりませんでした。
意味は無いですが写真を貼っておきます
placeholder : 代替画像ファイルのパスを指定します。いろいろな画像で共用で利用するのなら単色のGIFファイルくらいにしておくのがいいと思います。
threshold : 画像読込み開始までのしきい値を設定します。書かないと 0 です。
effect : fadeIn と show の2つで、書かないと show のようです。この js を使ってるよ！って分かるように fadeIn にしています。
event : デフォルトはスクロールして画像が見えてきた時に動作するような scroll という指定になっていますが、click とか sporty という設定もあります。
failurelimit : 同時読込み最大数の指定です。デフォルトでは 0 です。
効果を見るためのサンプル画像
