ページスクロールに伴って画像を読み込む「Lazy Load Plugin for jQuery」

他のサイトで見た「スクロールすると画像が読み込まれる」みたいのが
かっこよかったので、やってみました。

ダウンロード方法

「Lazy Load Plugin for jQuery」のサイト

上記のサイトのDownload「Latest source or minified.」より
リンクを「別名をつけて保存」で保存します。

導入方法

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.mini.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
	$("#leftCont img").lazyload({
	placeholder : "grey.gif",
	effect : "fadeIn"
	});
});
</script>

あとは上記のコードをHTMLにコピペして、読み込んであげればOKです。

注意点としては

・JavaScriptのパス、名前は合ってるか
・画像のパス、名前は合っているか
くらいでしょうか。

最後に

・ダウンロードした「jquery.lazyload.mini.js」以外に、「jQuery」も必要です。
・「gray.gif」を用意すれば、画像がフェードインして表示されます。
・「$(“#leftCont img”).lazyload({」ここのパスを指定することで、このプラグインの読み込む場所を指定出来ます。
例えば「$(“#mainCont img”).lazyload({」などでしょうか。ご自身のサイトのIDなどに合わせて下さい。

この記事に関連する記事

コメントをどうぞ