懒加载
2017-05-09 本文已影响109人
徐国军_plus
1.什么是懒加载？
懒加载也就是延迟加载。
当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为同一张图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。
demo:
//所有img元素的src属性值是同一个图片地址，自定义属性data-src里存储的是真正需要加载的图面地址，当图片出现在浏览器的可视区域内时，再把data-src的属性值赋值给对应的img元素的src属性
<ul class="warp">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
2.为什么要使用懒加载?
很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕，会花费很多不必要的时间。
3.懒加载的原理是什么?
页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。
懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把正真的路径存在元素的自定义属性“data-src”（这个名字起个自己认识好记的就行）里，要用的时候就取出来，再设置。
4.懒加载的实现步骤?
首先我们来看一张图：
Paste_Image.png
滚动滑动的垂直距离:
var scrollTop = $(window).scrollTop();
窗口的高度：
var windowHeight = $(window).height();
元素到页面顶部的高度：
var offsetTop = $img.offset().top;
由图片可知：当offsetTop < scrollTop + windowHeight && offsetTop > scrollTop ,这时图片元素才在我们的可视窗口
懒加载步骤：
1)首先，不要将图片地址放到src属性中，而是放到自定义属性data-src中。
2)页面加载完成后，根据scrollTop判断图片是否在用户的视野内，如果在，则将data-original属性中的值取出存放到src属性中。
3)在滚动事件中重复判断图片是否进入视野，如果进入，则将data-src属性中的值取出存放到src属性中。
5.懒加载的优点是什么?
页面加载速度快，减少内存占用，减轻了服务器的压力，节约了流量,用户体验好
懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。
6.实现图片懒加载代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul,li{
list-style:none;
}
.container{
width: 600px;
margin: 0 auto;
}
.container li{
float: left;
margin: 10px 10px;
}
.container li img{
width: 240px;
height: 180px;
}
p{
float: left;
}
</style>
</head>
<body>
<ul class="container clearfix">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
/*
1.对于所有的img标签，把真实的地址放入自定义属性data-img
2.当滚动页面时，检查页面所有的img标签，看看这个标签是否出现到我们的视野，当出现在我们的视野时
再去判断它是否已经加载过，如果没有加载，加载它
*/
// 用户第一次打开页面，还未滚动窗口的时候需要执行一次 lazyRender
lazyRender();
var clock;
$(window).on('scroll',function(){
//用户鼠标滚轮滚动一次，有多次事件响应。下面的 setTimeout 主要是为性能考虑，只在最后一次事件响应的时候执行 lazyRender
if(clock){
clearTimeout(clock)
}
clock = setTimeout(function(){
lazyRender();
}, 300)
})
function lazyRender() {
$('.container 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;
//offsetTop < scrollTop + windowHeight && offsetTop > scrollTop ,这是元素才在我们的可视窗口
if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop) {
return true;
}
return false;
}
//判断加没加载过
function isLoaded($img) {
return $img.attr('data-src') === $img.attr('src')
}
function loadImg($img) {
$img.attr('src',$img.attr('data-src'))
}
</script>
</body>
</html>
