ページスクロールに伴って画像を読み込む「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