jQueryプラグインLazyloadの解説・設置方法、画像大量表示している場合サーバー負担軽減につながります。
ブラウザ画面に表示された時に読み込みを開始するので、無駄なトラフィックを防ぐ事が出来ます。
大量に画像を表示しているホームページなんかでは有効なプラグインですね。
- jquery.js - ダウンロードページ かならず必要ですのでダウンロードして下さい
コード
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.dimensions.min.js"></script> <script type="text/javascript" src="jquery.lazyload.js"></script> <script type="text/javascript"> $(function() { $("img").lazyload(); }); </script> <!--▲head内-->
DEMO- dimensions.js DL - lazyload.js DL
dimensions.jsはzip解凍してjsファイルだけ取り出しましょう。
上記のコードを入れるだけで、img srcでソースに書かれているものが全て対象になります。
以下のように書くと200px先読みしてくれます。
$(”img”).lazyload({ threshold : 200 });
更に詳しい内容は作者さんのページへ