Lazyload

スクロールしてから画像を読み込む機能

CSSに関しては一部CSSライブラリを採用しているので併用してください。

ページ読み込み時はダミー画像を表示して、スクロールで定位置に来たときに設定した画像を読み込みます。
動画にも使用可能。

使い方

*-img-*の[src]にはダミー画像のパスを記述して、[lz]の属性に正規画像のパスを記述。
$(this).offset().top - 200の数値を変更することで読み込むタイミングを変更可能。

HTML
Script

function LazyLoad(wst){
    $('img[lz] , video[lz]').each(function(){
      let lz = $(this).attr('lz');
      if(wst + $win.height() > $(this).offset().top - 200){
        $(this).attr('src',lz).removeAttr('lz');
        $(this).on('load', function(){$(this).removeClass('lz');});
      }
      if(lz != undefined){$(this).addClass('lz');}
    });
  }
  
  $win.load(function(){
    LazyLoad($win.scrollTop());
  });
  
  $win.scroll(function(){
    LazyLoad($win.scrollTop());
  });