大きな画像を多用しているページなど、画像を読み込む時間が掛かってしまい、
表示に時間を要することがあります。
そんな画像の読み込みを、実際にページをスクロールして
表示位置に辿り着くまで実行させないjQueryのプラグイン
「Lazy Load Plugin for jQuery」が使えそうなのでご紹介。
使用するJSファイルは、上記サイトから「jquery.lazyload.js」
それと併せてもちろん「jquery.js」
もう一つ、jQueryDimensionsPluginから「jquery.dimensions.js」
の３つのファイルをHTML上から読み込んで、
—————————————–
<script type=”text/javascript”>
$(function() {
$(“img”).lazyload();
});
</script>
—————————————–
を記述して実行させればいいだけです。
実際に試してみるとこうなります。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
実際にスクロールすると画像表示が実行（表示の際に一瞬パッとチラつきが見える）されていますが
PC環境（スペックの良いPC）によっては見た目的に分からないかもしれません。
また、
—————————————–
<script type=”text/javascript”>
$(function() {
$(“img”).lazyload({
threshold : 200
});
});
</script>
—————————————–
と記述することでスクロールする際の、読み込み開始する手前の
ピクセル数を指定することも可能なもよう。
≫【参考】重い画像を順番に読み込むjavascript「Lazy Load Plugin for jQuery」｜skuare.net
通常のページでもこれを使することでレンダリングスピードはだいぶ速くなると思います。
是非お試しくださいませ。