ページスクロールに伴って画像を読み込む「Lazy Load Plugin for jQuery」
- タイトルとURLをコピーする
- Tweet

他のサイトで見た「スクロールすると画像が読み込まれる」みたいのが
かっこよかったので、やってみました。
ダウンロード方法
「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などに合わせて下さい。
- タイトルとURLをコピーする
- Tweet

ECサイトで使える! 商品一覧の画像をいじらずに「売り切れ」などを表示させる方法
ブログリニューアル時に助けられたプラグインや考えた事 #WordPress
WordPressでカテゴリーを並び変えプラグイン「My Category Order」