图片懒加载,也可以叫做按需加载,它是对网页性能优化的一种方案,达到节省资源,加快浏览速度的目的。各大网站都使用这个技术,例如谷歌的图片搜索页,天猫,淘宝,京东等。
其实原理也很简单,就是判断图片是否在可视区内。首先给图片的src设置一个loading图片,或者一个1像素的透明图片,然后设置一个自定义属性,比如_src,或者使用data-src,如果页面滚动的时候,图片达到可视区内的话,就把自定义属性_src赋值给src。下面就简单的介绍一下基本的代码实现过程。
下面是dom结构
//设置图片的data属性为真实地址,src可以是一张透明图片。
<img src="images/1x1.png" data-src="images/p.jpg"> 01.
02.
下面是js代码
//函数调用,可以不传参数
lazy.init()
//也可以带参数,参数为容器的ID或者class
lazy.init('#wrap');
lazy.init('.wrap'); 01.
02.
03.
04.
05.
var lazy = {
//初始化函数
init : function(){
//判断需要根据哪个容器来懒加载图片,如果没有参数,则是根据document
var _ele = document.querySelector(arguments[0]) || document;
//获取容器里面所有的图片
var _img = _ele.querySelectorAll('img'),_this = this;
//初始执行一次
this.set(_img);
//给window绑定scroll事件
this.addEvent(window,'scroll',function(){
_this.set(_img)
});
//给window绑定resize事件
this.addEvent(window,'resize',function(){
_this.set(_img)
});
},
//设置图片
set : function(_img){
//获取可视区的高度
var _h = document.documentElement.clientHeight;
//然后循环img
for (var i=0;i<_img.length;i++) {
//判断是否出现
if(!_img[i].off && (_img[i].getBoundingClientRect().top) < _h ){
//设置src
_img[i].src = _img[i].getAttribute('data-src');
//删除自定义_src属性
_img[i].removeAttribute('data-src');
//设置一个开关,防止每次滚动都重新修改src
_img[i].off = true;
}
};
},
//绑定事件
addEvent : function (obj,types,fn){
obj.attachEvent ? obj.attachEvent('on'+types,fn) : obj.addEventListener(types,fn,false)
}
} 01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
(更多…)