jQueryで画像の読込み遅延プラグイン「LazyLoad with jQuery」

ファイルサイズの大きい画像を多用しているページやアクセスが集中するサイトは、画像の読み込みがレンダリングスピードに追いつかなくて、表示がもたつくことがよくあります。ひどいと、全部読み込むまで、全く表示しないなんてこともあるので、訪れた方は、待ちきれずサイトを移動するかも知れません。

そこで、スクロールに合わせて表示された箇所から順に画像を表示するjQueryプラグイン「LazyLoad with jQuery」を紹介します。

必要なファイル

jquery.js

Lazy Load Plugin for jQuery

Lazy Load Plugin for jQueryのダウンロードはページ下部に右のような箇所がありますので、”source”をクリックしてソースを表示させます。

以下のソースを記述すします。

<script src="images/jquery.js" type="text/javascript"></script>
<script src="images/lazyload.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$("img").lazyload({
		placeholder:"img/lazyload.png",
		effect : "fadeIn"
	});
});

</script>

URLはアップロード先に書き換えてください。「images/lazyload.png」はまだ読み込んでない画像の代替画像です。小さなファイルサイズのものを適当に入れています。