图片懒加载
2017-10-28 本文已影响0人
海山城
什么是图片懒加载？
在图片非常多的应用场景，为了提高页面加载速度，改善用户体验，对未出现在视野范围内的图片先不进行加载，等到出现在视野范围才去加载。
实现思路
- 将所有img的src设置成同一张图片（比如一张显示loading中的图片）,这样一开始只需要加载一张，网络请求只走一次。或者不加载图片，显示白屏也可以。具体看需要。
- 图片的真实地址存放在其他地方，比如一个数组上。为了方便，为每个img自定义一个的data-src(自己随便命名)的属性，存放图片的真实地址
<div class="container">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="1" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="2" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="3" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="4" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="5" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="6" data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="7" data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="8" data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="9" data-src="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="10" data-src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="11" data-src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="12" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="13" data-src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="14" data-src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="15" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="16" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="17" data-src="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="18" data-src="http://cdn.jirengu.com/book.jirengu.com/img/18.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="19" data-src="http://cdn.jirengu.com/book.jirengu.com/img/19.jpg">
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="20" data-src="http://cdn.jirengu.com/book.jirengu.com/img/20.jpg">
</div>
- 当图片出现在视野范围内才去加载图片，这里有个关键点，如何去判断图片出现 在了视野中?
需要以下几个值来判断（假设是以window为容器进行滚动的）
①窗口高度（如果所有图片都在一个容器(div)中，那么需要获取到容器的高度）：$(window).height()
②滚动的距离：$(window).scrollTop()
③元素在平面内相对于顶点的距离：$node.offset().top
从下面的图片中可见，当offset().top <= scrollTop() + height()时，div元素才能展示在窗口
图片实例
LazyLoad()//一开始没有触发scroll事件，所以需要先去加载一波
$(window).on('scroll', function(){
LazyLoad()
})
function LazyLoad(){
$('.container img').each(function(){
if( isShow($(this)) ){
loadImg($(this))
}
})
}
function isShow($node){
return $node.offset().top <= $(window).scrollTop() + $(window).height()//如果在一个div内滚动的话，$(window)需要换成对应的div
}
function loadImg($img){
$img.attr('src', $img.attr('data-src'))
}
- 对于懒加载的图片过几秒显示可以设置如下的定时器，但是这样是华而不实的，不推荐这样做。正常就是追求图片能够快速加载
function LazyLoad(){
$('.container img').each(function(){
var $node = $(this)//闭包解决this在回调函数中最终不是想得到的值
if( isShow($node) ){
setTimeout(function(){
loadImg($node)
}, 500)
}
})
}
懒加载的优化
(1)函数节流：scroll事件中，每次滚动停下500ms后再去判断图片是否出现在视窗中，是否需要去加载。滚动事件中的代码改成如下
$(window).on('scroll', function(){
clearTimeout(timer)
timer = setTimeout(function(){
LazyLoad()
}, 500)
})
(2)每次滚动事件中去除掉已经加载完成的图片，以减少遍历的次数
①加载过的图片加上自定义的isLoaded的属性。
②下次的each遍历中过滤掉这些已经加载过的图片
var timer
LazyLoad()//一开始没有出发scroll事件，所以需要先去加载一波
$(window).on('scroll', function(){
clearTimeout(timer)
timer = setTimeout(function(){
LazyLoad()
}, 500)
})
function LazyLoad(){
$('.container img').not('[data-isLoaded]').each(function(){
var $node = $(this)
if( isShow($node) ){
loadImg($node)
}
})
}
function isShow($node){
return $node.offset().top <= $(window).scrollTop() + $(window).height()//如果在一个div内滚动的话，$(window)需要换成对应的div
}
function loadImg($img){
$img.attr('src', $img.attr('data-src'))
$img.attr('data-isLoaded', true)
}
