Jaueryでスクロール時に画像を読み込む
2010年06月07日
１ページあたりの画像が多いなどのときに便利なJQuryのプラグイン。
スクロール時に画像を読み込むプラグインを使用することで無駄なトラフィックを防ぐことが可能。
必要なファイルは下記の通り。
- JQueryは必須なので必ずダウンロード
- Lazyload.jsを入手
※最新版のJQuery(1.4)の場合は必要ないですが、最新版でない場合はdimensionsのプラグインが必要です。
ヘッダーに入手したファイルを記述します。
1 2 3 4 5 6 7 8 9 10 11 12 | <head> <script type="text/javascript" src="./js/jquery.js"></script> <!-- JQueryが最新版でない場合は下記ファイルを先に記述 --> <script type="text/javascript" src="./js/dimensions.js"></script> <script type="text/javascript" src="./js/lazyload.js"></script> <script type="text/javascript"> $(function() { $("img").lazyload(); }); </script> </head> |
上記でスクロールされるとimgタグの読み込みを開始します。
$(“img”)をクラス名にすることで特定の画像のみにすることも可能です。
フェードインさせたい場合は下記のように記述。
1 2 3 4 | <script type="text/javascript"> $(function() { $("img").lazyload({effect : "fadeIn"}); }); |
その他のエフェクトなどは作者ページを参考にするとよいです。
コメントする
：コメント(0)
：トラックバック(0)
コメント：0件
- コメントはありません。
トラックバック：0件
- トラックバックはありません。
