一、什么是图片懒加载？
当浏览器打开一个页面的时候，img标签先显示占位图（loading.gif），页面滚动，当该元素出现在浏览器的可视区域范围内时，img元素开始进行真实图片路径加载，并显示出来。这就是图片懒加载。
二、为什要使用这个技术？
比如一个页面中有很多图片，如淘宝、京东首页等等，如果一上来就发送这么多请求，页面加载就会很漫长。网络性能上：一开启页面就发送百八十个请求，服务器可能就吃不消了。比如一个页面有50张图片，就有50个图片请求，同时有100个人访问的话，就是5000个请求。
==总结：不仅可以减轻服务器的压力，而且可以让页面更快地呈现在用户面前（用户体验好）。==
三、怎么实现？
预热
1、页面中的img元素，如果没有src属性或者src属性没有设置值，浏览器就不会发出请求去下载图片 一旦通过JavaScript或者jQuery或DOM操作设置了图片路径，浏览器才会送请求，进行图片的下载。
2、如何获取图片真实的请求路径，先把真的路径存在元素的“data-original”（这个值可以自定义设置）属性里，要用的时候就取出来，再设置src属性就可以了，而src一开始则放入占位图显示（占位图用本地工程下的一张图片即可）。
条件
==- 存在真实路径的key值，如上面所述的‘data-original’，并且为img标签元素==
==- 该img为显示元素，没有隐藏==
==- 该img在浏览器的可视范围区域内==
==- 该img是否在下载操作的缓存数组里面==
3、热身几个关键点的基础知识。
屏幕可视窗口大小
| javas | jQuery |
|---|---|
| window.screen.availHeight | $(window).height() |
浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离
| javas | jQuery |
|---|---|
| document.body.scrollTop | $(document).scrollTop() |
元素相对于文档document顶部、左边的距离
jQuery
元素距离文档顶的距离
$(o).offset().top
元素距离文档左边缘的距离
$(o).offset().left
JavaScript
function getPosition (obj) {
var pos = {
top:0,
left:0
};
while (obj.offsetParent) {
pos.top += obj.offsetTop+obj.clientTop;
pos.left += obj.offsetLeft+obj.clientLeft;
obj = obj.offsetParent;
}
return pos;
}
image
4、如何判断某个元素进入或者即将进入可视窗口区域？
image
关键代码如下
var a = offsetTop(img);
if (a > document.body.scrollTop && a < (document.body.scrollTop + window.screen.availHeight)) {
// 在可视范围内
}
三、ytLazyLoad.js
| ytLazyLoad.js | jquery.lazyload.min.js |
|---|---|
| 纯JavaScript操作，不依赖任何的js文件 | jquery操作，依赖于jquery.min.jsw文件 |
| 图片加载成功或失败有回调事件 | 成功或者失败不存在回调事件 |
| 只支持垂直滑动 | 支持垂直、水平滑动 |
| 只支持一级窗口嵌套 | 支持多个窗口嵌套 |
码云公开代码的地址：
http://git.oschina.net/freedom_coco/codes/xy7ocuz8i4qajfknvpb2g12
使用方法：
YTImageLazyLoad({
success: function(obj, index) {
console.log(obj + '加载成功，下标为' + index);
},
failure: function(obj, index) {
console.log(obj + '加载失败，下标为' + index);
},
cusImgclass: 'imgURL quotepic userHead',
cusImgid: 'xx xxx xxx'
});
网友评论