Question

jquery.mobile怎么实现懒加载

Answer 1

三、实现懒加载必备的知识点

（一）获取窗口、窗口滚动和元素距离窗口顶部的偏移高度，计算元素是否出现在窗口可视范围内；

Paste_Image.png

function isShow($el){
var winH = $(window).height(),//获取窗口高度
scrollH = $(window).scrollTop(),//获取窗口滚动高度
top = $el.offset().top;//获取元素距离窗口顶部偏移高度
if(top < scrollH + winH){
return true;//在可视范围
}else{
return false;//不在可视范围
}
}

（二）监听窗口滚动事件，检查元素是否在可视范围内;
$(window).on('scroll', function(){//监听滚动事件
checkShow();
})
checkShow();
function checkShow(){//检查元素是否在可视范围内
$('img').each(function(){//遍历每一个元素
var $cur = $(this);
if(!!isloaded($cur)){return;}//判断是否已加载
if (isShow($cur)) {
setTimeout(function(){
showImg($cur);
},300)//设置时间是为了更好的看出效果
};
});
}

（三）元素显示的时候把之前的默认照片替换成data-src里的照片。
function showImg($el){
$el.attr('src', $el.attr('data-src'));
$cur.data('isloaded',true);
}