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">
サンプル
