ConneCre

connelog

RSS

Lazy Load Plugin for jQuery

Lazy Load Plugin for jQueryは、実際にスクロールするまで画像の読み込みを行わないjQueryのプラグインです。
特に画像を多く配置しているページでは転送量や負荷を抑えることができます。

■headerの記述

  1. <script src="/js/jquery.js" type="text/javascript"></script>
  2. <script src="/js/jquery.lazyload.js" type="text/javascript"></script>
  3. <script type="text/javascript">
  4.     $(function() {
  5.     $("img").lazyload({
  6.     threshold : 200,
  7.     placeholder : "/img/foo.gif",
  8.     effect : "fadeIn" ,
  9.     event : "click",
  10.     failurelimit : 10
  11.     });
  12.     });
  13. </script>


■オプション

threshold: スクロールして表示させる際のトリガーとなるピクセル数。デフォルトは0。
placeholder: 読み込み前の代替画像。
effect: 画像の表示方法。fadeinなど。
event: 読み込みのトリガー。click(クリック),sporty(タイマー)など。
failurelimit: 同時に読み込む数。


実際に使用してみると、フッターに画像を使用していると、フッターの画像も遅延読み込みになってしまうので、placeholderでアニメーションgifで作成したloading画像などの目立った画像を使用すると、かなり気になります。
なので、1px×1pxの透過画像を使用しておくのが無難だと思います。

PAGE TOP