pukiwiki1.4/tips/jquery.lazyload.js の履歴差分(No.1)

  • 追加された行はこの色です。
  • 削除された行はこの色です。
* jquery.lazyload.jsを利用する [#x96fc078]

 このページの文章はかなり古い為、参考になりません

jquery.lazyload.jsを使い画像の読み込みを遅延させてサーバー負荷を軽減する。
スクロールさせると画像を読み込む。
PCでは殆どストレスが無いが、常にオンラインが維持できないスマホ環境ではページを表示させておいて後で読むようなことがやりにくくなるので不便に感じる可能性が高い。

テスト環境には導入してみたが本番に導入は見送りとした。


** ダウンロード [#nb640c55]

- [[Lazy Load Plugin for jQuery:http://www.appelsiini.net/projects/lazyload]]
-- [[jquery.lazyload.min.js:https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js]]

** 手順 [#s13a2849]

- 予めダミー画像として spacer.gif を image/ にアップしておく
-- spacer.gif のサイズは本物と同じ画像サイズにしておくか、imgのwidth,heightを適切に設定しておくと遅延ロード時に表示がガタつかなくて済む
- skin/js/に jquery.lazyload.min.js をアップロード
- skinに追記
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script type="text/javascript" src="skin/js/jquery.lazyload.min.js"></script>
 <script>
 $('img.lazy').lazyload();
 </script>
- 画像に追記
 <img src="' . IMAGE_DIR . 'spacer.gif" data-original="' . IMAGE_DIR . 'pad/ks/026.png" alt="ks026" width="22" class="lazy">

* コメント [#p9ec71cf]

#pcomment