jQuery スクロールによる画像の遅延読み込み

画像の遅延ロードによる表示速度の向上

jQuery

$(function () { // 初回時 delayImage(); // スクロール時 $(window).scroll(function() { delayImage(); }); function delayImage() { $('img').each(function(){ var img_src = $(this).attr('data-src'); // 表示されていない画像が対象 if ($(this).attr('src') != img_src) { // 画像位置よりウィンドウ最下部が超えた場合 if ($(window).scrollTop() + $(window).height() > $(this).offset().top) { $(this).fadeOut('fast', function() { // 画像を表示 $(this).attr('src', img_src).fadeIn(); }); } } }); } });

独自データ属性のdata-*に画像のURLを設定。

HTML

<img src="/img/loading.png" data-src="/img/xxxxx.jpg">

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。