WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

表示位置にスクロールするまで画像の読み込みを実行させない「Lazy Load Plugin for jQuery」

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

そんな画像の読み込みを、実際にページをスクロールして
表示位置に辿り着くまで実行させない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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です