pukiwiki1.4/tips/jquery.lazyload.js の履歴(No.3)

jquery.lazyload.jsを利用する#

今は loading="lazy" を使えば解決です。このページの文章はかなり古い為、参考になりません。

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

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

ダウンロード#

手順#

  • 予めダミー画像として 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">