懒加载技术(简称lazyload)并不是新技术, 它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载

  涉及到图片,falsh资源 , iframe, 网页编辑器(类似FCK)等占用较大带宽,且这些模块暂且不在浏览器可视区内,因此可以使用lazyload在适当的时候加载该类资源.避免网页打开时加载过多资源,让用户等待太久,

  来,举个栗子,当你去东哥的绿帽网网购的时候,打开首页的时候,直接在导航栏选了商品种类跳转到了列表页,那首页下方那些未显示的区域的图片需不需要加载,当然不需要了,你根本没看他们,加载出来干啥

  说白了就是占着茅坑不拉粑粑,那我们怎么解决呢,这时我们就该用到懒加载技术,只有当这部分图片出现在可视区内再去请求服务器。

  懒加载的核心:在如何在适当的时候加载用户需要的资源(这里用户需要的资源指该资源呈现在浏览器可视区域)

  下面来一个大例子

例子的思路:页面渲染时将src路径放到自定义属性中去,这样页面加载时图片就不会去请求服务器,当图片滚动到可视区内时,获取它的自定义属性并赋值给src

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="" data-url ="img/1.jpg">
<img src="" data-url ="img/2.jpg">
<img src="" data-url ="img/3.jpg">
<img src="" data-url ="img/4.jpg">
<img src="" data-url ="img/5.jpg">
<img src="" data-url ="img/6.jpg">
<img src="" data-url ="img/7.jpg">
<img src="" data-url ="img/8.jpg">
<img src="" data-url ="img/9.jpg">
<img src="" data-url ="img/10.jpg">
<img src="" data-url ="img/1.jpg">
<img src="" data-url ="img/2.jpg">
<img src="" data-url ="img/3.jpg">
<img src="" data-url ="img/4.jpg">
<img src="" data-url ="img/5.jpg">
<img src="" data-url ="img/6.jpg">
<img src="" data-url ="img/7.jpg">
<img src="" data-url ="img/8.jpg">
<img src="" data-url ="img/9.jpg">

</body>

</html>

来 上关键的JS代码

<script>
//页面加载时先调用一次loadImg函数
loadImg()
//添加滚动事件
window.onscroll = function () {
loadImg()
}

function loadImg() {
var iH = document.documentElement.clientHeight;
var t = document.documentElement.scrollTop || document.body.scrollTop;
var img = document.getElementsByTagName("img");
for (var i = 0; i < img.length; i++) {
if ((!img[i].bstop) && offsetTop1(img[i]) < (iH + t)) {
//注意 真正在页面上使用一定要加开关,不加开关每次条件符合时都会重新请求服务器,还不如不用懒加载
//理解不了啥意思的同学,可以把img[i].bstop删去试试
//同时不要用offsetTop
//因为offsetTop是获取离已定位的父元素的top值
//所以自己封装一个计算offsetTop的函数
var src = img[i].getAttribute("data-url");
img[i].src = src;
img[i].bstop = true;
console.log(1)
}
}
}

//封装获取元素离上方的高度的函数
function offsetTop1(obj) {
var t = obj.offsetTop;
while (obj.offsetparent) {
obj = obj.offsetparent;
t = t + obj.offsetTop;
}
return t;
}
</script>