本文题目:完成图片懒加载(lazyload)
文章作者:Jake
宣布时刻:2016-11-26, 18:46:34
末了更新:2016-11-28, 17:12:59
原始链接:http://i.jakeyu.top/2016/11/26/完成图片懒加载/
允许协定: “签名-非商用-雷同体式格局同享 4.0” 转载请保存原文链接及作者。
懒加载的意义（为何要运用懒加载）
对页面加载速率影响最大的就是图片，一张一般的图片能够到达几M的大小，而代码或许就只有几十KB。当页面图片许多时，页面的加载速率迟缓，几S钟内页面没有加载完成，或许会落空许多的用户。
所以，关于图片过量的页面，为了加快页面加载速率，所以许多时刻我们须要将页面内未出如今可视地区内的图片先不做加载， 比及转动到可视地区后再去加载。这模样关于页面加载机能上会有很大的提拔，也提高了用户体验。
道理
将页面中的img标签src指向一张小图片或许src为空，然后定义data-src（这个属机能够自定义定名，我才用data-src）属性指向实在的图片。src指向一张默许的图片，不然当src为空时也会向服务器发送一次要求。能够指向loading的地点。
注：图片要指定宽高
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" />当载入页面时，先把可视地区内的img标签的data-src属性值负给src，然后监听转动事宜，把用户行将看到的图片加载。如许便完成了懒加载。
代码
在写代码前，须要相识种种高度。先看这篇文章scrollTop,offsetTop,scrollLeft,offsetLeft
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
display: block;
margin-bottom: 50px;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
</body>JavaScript
<script>
var num = document.getElementsByTagName('img').length;
var img = document.getElementsByTagName("img");
var n = 0; //存储图片加载到的位置，防止每次都从第一张图片最先遍历
lazyload(); //页面载入终了加载但是地区内的图片
window.onscroll = lazyload;
function lazyload() { //监听页面转动事宜
var seeHeight = document.documentElement.clientHeight; //可见地区高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //转动条距离顶部高度
for (var i = n; i < num; i++) {
if (img[i].offsetTop < seeHeight + scrollTop) {
if (img[i].getAttribute("src") == "default.jpg") {
img[i].src = img[i].getAttribute("data-src");
}
n = i + 1;
}
}
}
</script>jQuery
<script>
var n = 0,
imgNum = $("img").length,
img = $('img');
lazyload();
$(window).scroll(lazyload);
function lazyload(event) {
for (var i = n; i < imgNum; i++) {
if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {
if (img.eq(i).attr("src") == "default.jpg") {
var src = img.eq(i).attr("data-src");
img.eq(i).attr("src", src);
n = i + 1;
}
}
}
}
</script>运用撙节函数举行机能优化
假如直接将函数绑定在scroll事宜上，当页面转动时，函数会被高频触发，这异常影响浏览器的机能。
我想完成限定触发频次，来优化机能。
撙节函数：只允许一个函数在N秒内实行一次。下面是一个简朴的撙节函数：
// 简朴的撙节函数
//fun 要实行的函数
//delay 耽误
//time 在time时刻内必需实行一次
function throttle(fun, delay, time) {
var timeout,
startTime = new Date();
return function() {
var context = this,
args = arguments,
curTime = new Date();
clearTimeout(timeout);
// 假如到达了划定的触发时刻距离，触发 handler
if (curTime - startTime >= time) {
fun.apply(context, args);
startTime = curTime;
// 没到达触发距离，从新设定定时器
} else {
timeout = setTimeout(fun, delay);
}
};
};
// 现实想绑定在 scroll 事宜上的 handler
function lazyload(event) {
for (var i = n; i < imgNum; i++) {
if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {
if (img.eq(i).attr("src") == "default.jpg") {
var src = img.eq(i).attr("data-src");
img.eq(i).attr("src", src);
n = i + 1;
}
}
}
}
// 采用了撙节函数
window.addEventListener('scroll',throttle(lazyload,500,1000));