大きな画像を多用しているページなど、画像を読み込む時間が掛かってしまい、
表示に時間を要することがあります。

そんな画像の読み込みを、実際にページをスクロールして
表示位置に辿り着くまで実行させないjQueryのプラグイン
「Lazy Load Plugin for jQuery」が使えそうなのでご紹介。

LazyLoad.jpg
Lazy Load Plugin for jQuery

使用するJSファイルは、上記サイトから「jquery.lazyload.js」
それと併せてもちろん「jquery.js」
もう一つ、jQueryDimensionsPluginから「jquery.dimensions.js」
の3つのファイルをHTML上から読み込んで、
—————————————–
<script type=”text/javascript”>
$(function() {
$(“img”).lazyload();
});
</script>
—————————————–
を記述して実行させればいいだけです。

実際に試してみるとこうなります。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

LazyLoad配布サイトのデモページはこちら

実際にスクロールすると画像表示が実行(表示の際に一瞬パッとチラつきが見える)されていますが
PC環境(スペックの良いPC)によっては見た目的に分からないかもしれません。

また、
—————————————–
<script type=”text/javascript”>
$(function() {
$(“img”).lazyload({
threshold : 200
});
});
</script>
—————————————–
と記述することでスクロールする際の、読み込み開始する手前の
ピクセル数を指定することも可能なもよう。
【参考】重い画像を順番に読み込むjavascript「Lazy Load Plugin for jQuery」|skuare.net

通常のページでもこれを使することでレンダリングスピードはだいぶ速くなると思います。

是非お試しくださいませ。