Lazy Load Plugin for jQuery
Lazy Load Plugin for jQueryは、実際にスクロールするまで画像の読み込みを行わないjQueryのプラグインです。
特に画像を多く配置しているページでは転送量や負荷を抑えることができます。
■headerの記述
<script src="/js/jquery.js" type="text/javascript"></script><script src="/js/jquery.lazyload.js" type="text/javascript"></script><script type="text/javascript">$(function() {$("img").lazyload({threshold : 200,placeholder : "/img/foo.gif",effect : "fadeIn" ,event : "click",failurelimit : 10});});</script>
■オプション
threshold: スクロールして表示させる際のトリガーとなるピクセル数。デフォルトは0。
placeholder: 読み込み前の代替画像。
effect: 画像の表示方法。fadeinなど。
event: 読み込みのトリガー。click(クリック),sporty(タイマー)など。
failurelimit: 同時に読み込む数。
実際に使用してみると、フッターに画像を使用していると、フッターの画像も遅延読み込みになってしまうので、placeholderでアニメーションgifで作成したloading画像などの目立った画像を使用すると、かなり気になります。
なので、1px×1pxの透過画像を使用しておくのが無難だと思います。






