什么是懒加载
对于用户暂时不需要的数据，不在页面打开的时候就去发送请求，设置一个条件，当用户触发条件的时候再去加载它，这样做的好处不言而喻，防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题，优化了用户的体验。举例来说，用户搜索图片，点开一个页面，用户也许只是单纯的想看看有没有合适的，如果没有就关掉页面了，而页面中有几百张图片，如果只是单纯的img标签，浏览器在加载的时候会同时请求这几百张图片，页面卡死一段时间，用了不少的流量加载出来 ，这对用户来说体验是很差的，所以，我们需要用到懒加载。
举个例子
图片懒加载思路：
- 对于所有的标签，设置一个自定义属性，将
src放入自定义属性中 - 当页面滚动时，如果
img出现在窗口且没有加载，那就是加载它
知道思路之后，我们可以动手来实现一下这个效果，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Picture lozy loading</title>
<style>
.window{
height: 2000px;
background: #f1f1f1;
}
.pics{
width: 500px;
margin: 0 auto;
border: 3px solid #ccc;
border-radius: 5px;
text-align: center;
}
.pics img{
width: 00px;
height: 500px;
margin: 10px 0;
}
</style>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<div class="window"></div>
<div class="pics">
<img src="" alt="" data-src="http://i01.pic.sogou.com/cb4e9c56b6407929">
<img src="" alt="" data-src="http://i04.pic.sogou.com/24475ce890affd74">
<img src="" alt="" data-src="http://i03.pic.sogou.com/754215842d2e7b8f">
<img src="" alt="" data-src="http://i04.pic.sogou.com/fefe1127a428d5d7">
<img src="" alt="" data-src="http://i02.pic.sogou.com/fd9caa216e10cbfd">
<img src="" alt="" data-src="http://i02.pic.sogou.com/6f0856038af8fed8">
<img src="" alt="" data-src="http://i01.pic.sogou.com/cf403ec86cabcf5a">
<img src="" alt="" data-src="http://i04.pic.sogou.com/f34c9343648a299e">
<img src="" alt="" data-src="http://i01.pic.sogou.com/3be4b0564a82b91b">
<img src="" alt="" data-src="http://i02.pic.sogou.com/3cd9b64594f071d0">
</div>
</body>
</html>
如上代码，我们的页面中两个DIV, 第一个设置高度为2000px，用于撑起页面，撑出滚动条，第二个DIV里面放置了10张图片，图片有一个自定义属性data-src，里面放置图片的src，我们需要实现的功能是，当Img出现在窗口，我们就去加载它，引入jQuery，这里我们用jQuery来实现。
<script>
$(window).on('scroll',function (){
$('.pics img').each(function (){
if(checkShow($(this)) && !isLoaded($(this))){
loadImg($(this))
}
})
})
function checkShow($img){
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offsetTop = $img.offset().top
if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
return true
}
return false
}
function isLoaded($img){
return $img.attr('src') === $img.attr('data-src')
}
function loadImg($img){
$img.attr('src',$img.attr('data-src'))
}
</script>
js脚本如上，给window添加一个scroll事件，按照思路，当页面滚动时，如果img出现在窗口且没有加载，那就是加载它，定义三个函数（checkShow,isLoaded,loadImg）；
首先判断图片是否出现在窗口。
首先判断图片是否在窗口，获取需要用到的条件：
- 获取滚动条的滚动距离
- 获取窗口的高度
- 获取img的当前位置
如下图所示，如果img的当前位置大于滚动条的滚动距离并且小于窗口的高度加上滚动条滚动的距离，那么，说明图片已经出现在可视口
1.png
写个判断，如果img的当前位置大于滚动条的滚动距离并且小于窗口的高度加上滚动条滚动的距离的话就return true，反之则false；
加载图片既是将图片的data-src赋值给src属性；
判断图片是否加载，即判断img的src是否等于data-src，将结果返回出去，你也可以在加载图片的时候给图片添加一个自定义的属性，然后判断图片是否有该属性，这样的思路也可以，这样的话一个懒加载就实现了。
性能优化
代码写完之后我们来看一下，首先打开页面，发现什么都没有，有的浏览器会显示一个红x，因为我们没有设置img的src属性，所以会导致这种场景，我们可以找一张白图或者一张loading图，将所有的图片的src先设置成它，这样浏览器只会发一次图片请求，对性能没有影响，解决了这个问题我们再接着往下，如果打开页面的时候不滚动，那么图片就不会加载，如果没有之前的DIV撑起滚动条，那么图片就不会显示我们想要的效果，所以，我们需要在页面打开的时候就做一次判断，执行一次遍历，将遍历函数封装一下，然后执行，顺便将滚动事件的函数替换成函数名，减少代码；
接着对性能做一下测试，在滚动的时候console.log("hello")，打开页面轻轻滚动一下，可以发现控制台输出10个hello，这说明滚动一下函数被执行了10次，也就是做了十次的遍历以及判断，如果数据过于庞大的话，每次用户滚动窗口，会让浏览器出现卡顿，因此，我们还可以用定时器来优化一下我们的代码，var一个clock,在用户滚动的时候判断，如果clock已经存在，就不再设置这个定时器，将clock写成一个定时器，400毫秒之后执行我们封装好的遍历函数lazyRender，这样，用户在滚动窗口的时候就不会重复触发了，在滚动窗口400毫秒之后才会触发一次遍历，对性能做了一下优化。优化后的代码如下：
<script>
lazyRender()
var clock
$(window).on('scroll',function (){
if(clock){
clearTimeout(clock)
}
clock = setTimeout(function (){
lazyRender()
},400)
})
function lazyRender(){
$('.pics img').each(function (){
if(checkShow($(this)) && !isLoaded($(this))){
loadImg($(this))
}
})
}
function checkShow($img){
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offsetTop = $img.offset().top
if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
return true
}
return false
}
function isLoaded($img){
return $img.attr('src') === $img.attr('data-src')
}
function loadImg($img){
$img.attr('src',$img.attr('data-src'))
}
</script>
举一反三
其实懒加载并不只适用于以上场景，任何对于用户暂时不需要的数据，都可以用到懒加载，不在页面打开的时候就去发送请求，而是设置一个条件，当用户需要的时候触发条件再去加载它。
网友评论