懒加载
//进页面直接调用
start()
// 滚动的时候执行加载函数
$(window).on('scroll',function(){
start()
})
//加载函数
function start(){
//not('[data-isLoaded]') 用来过滤已经加载过的,实现节流
$('.container img').not('[data-isLoaded]').each(function(){
if( isShow($(this)) ){
loadImg($(this))
}
})
}
// 判断是否进入视野的函数
function isShow($node){
return $node.offset().top <= $(window).height() + $(window).scrollTop()
}
// 格式化图片加载地址函数
function loadImg($img){
//setTimeout模拟延迟 测试效果用,实际环境不要加
// setTimeout(function(){
$img.attr('src', $img.attr('data-src'))
// },500)
//加载过后就添加 data-isLoaded属性
$img.attr('data-isLoaded',1)
}
转自:懒加载-enenyao