EITCH DESIGN エイチ デザイン / 画像遅延読み込み

menu

画像遅延読み込み

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

  • CODE
  • DEMO
  • 説明
  • 使い方
  • 解説

準備中

準備中

  • html

    copy

  • css

    copy
    none

  • jQuery

    copy
    function LazyLoad(wst){
  $('img[lz] , video[lz]').each(function(){
    var 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());
});