在网页中,常常需要用到图片,而图片需要消耗较大的流量。正常情况下,浏览器会解析整个HTML代码,然后从上到下依次加载<img src="xxx">的图片标签。如果页面很长,隐藏在页面下方的图片其实已经被浏览器加载了。如果用户不向下滚动页面,就没有看到这些图片,相当于白白浪费了图片的流量。
懒加载即用户滚动页面时显示出来的时候才加载图片。当网速非常快的时候,用户并不能感知懒加载的动作,既省流量又不影响用户浏览。
原理:
在输出HTML的时候,不要直接输出<img src="xxx",而是输出如下img标签:
<img src="/static/loading.gif" data-src="http://真正的图片地址/xxx.jpg">
因此,页面显示的图片是一个gif加载动画。当页面滚动时,如果图片出现在屏幕中,就利用jQuery把<img>的src属性替换为data-src的内容,浏览器就会实时加载。
1.判断元素出现在视野中
height红色区域为当前窗口,绿色区域代表整个页面,横线代表一行文字
从上图中可以看出,如果
$(node).offset().top <= $(window).height() + $(window).scrolltop()
那么文字出现在用户视野
function isShow($node){
return $node.offset().top <= $(window).height() + $(window).scrollTop()
}
2.加载图片
使用jQuery将src地址替换为data-src地址
<img src="https://yafanisonya.github.io/resume/houseofcards/img/loading.gif" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg">
<img src="https://yafanisonya.github.io/resume/houseofcards/img/loading.gif" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg">
<img src="https://yafanisonya.github.io/resume/houseofcards/img/loading.gif" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg">
<img src="https://yafanisonya.github.io/resume/houseofcards/img/loading.gif" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg">
function loadImg($img){
$img.attr('src', $img.attr('data-src')) // 设置src属性
$img.attr('data-isLoaded', 1) //已加载过的图片做标记
//当用户在滚动时判断图片是否已经加载,若加载过,就不在加载
}
lazyLoad
js代码
//用户一开始进来的时候就进行一次是否出现在可视窗口的判断
start()
//滚动页面再进行判断
$(window).on('scroll', function(){
start()
})
function start(){
//.not('[data-isLoaded]')选中已加载的图片不需要重新加载
$('.container img').not('[data-isLoaded]').each(function(){
var $node = $(this)
if( isShow($node) ){
loadImg($node)
}
})
}
//判断一个元素是否出现在可视窗口
function isShow($node){
return $node.offset().top <= $(window).height() + $(window).scrollTop()
}
//加载图片
function loadImg($img){
$img.attr('src', $img.attr('data-src'))
$img.attr('data-isLoaded', 1)
}
</script>
网友评论