The principle and realization of picture lazy loading

1. Why should I use lazy loading?

For pages with too many pictures, in order to speed up the page loading, many times we need to do not load the picture within the viewable area of the page , wait until the visible area is scrolled to load. This will greatly improve the performance of page loading and improve the user experience.

2, how to achieve?

In fact, from the principle point of view is very simple, in the page loading of the IMG tag on the page src points to a small picture, the real address is stored in a custom attribute, here I use DATA-SRC to store, as follows.

　　然后通过选择器获取页面img标签并保存，开启一个定时器，遍历保存的img标签， 判断其位置是否出现在了可视区域内。如果出现在可视区域了那么就把真实的src地址给赋值上。 并且从数组中删除，避免重复判断。 那么你可能会问，如何判断是否出现在可视区域内吗？ 那就是你可以获取当前img的相对于文档顶的偏移距离减去scrollTop的距离， 然后和浏览器窗口高度在进行比较，如果小于浏览器窗口则出现在了可视区域内了， 反之，则没有。

3, good, nonsense not much to say, on the code

Window. Echo = (function (window, document, undefined) {
' Use strict ';
var store = [], offset, throttle, poll;

var _inview = function (EL) {//calculation appears in viewport
var coords = El.getboundingclientrect ();
Return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerheight | | document.do Cumentelement.clientheight) + parseint (offset));
};
var _isdeal = function (EL) {//Whether it has been processed
return El.getattribute (' src ') = = = = El.getattribute (' data-src ');
}
var _pollimages = function () {
for (var i = store.length; i--;) {
var self = store[i];
if (!_isdeal (self) && _inview (self)) {
SELF.SRC = Self.getattribute (' data-src ');
Store.splice (i, 1);
}
}
};

var _throttle = function () {
Cleartimeout (poll);
Poll = SetTimeout (_pollimages, throttle);
};

var init = function (obj) {
var nodes = Document.queryselectorall (' [data-src] ');
var opts = obj | | {};
offset = Opts.offset | | 0;
Throttle = Opts.throttle | | 250;
for (var i = 0; i < nodes.length; i++) {
Store.push (Nodes[i]);
}
_throttle ();
if (Document.addeventlistener) {
Window.addeventlistener (' scroll ', _throttle, false);
} else {
Window.attachevent (' onscroll ', _throttle);
}
};

return {
Init:init,
Render: _throttle
};
}) (window, document);

　　

Due to the bandwidth problem of the mobile network, the returned data requested during the process is often paged, meaning that the re-requested IMG SRC is not stored in the original store array.

 
拓展
上面涉及到一个计算是否在视区的方法:Getboundingclientrect () , This method returns a rectangle object that contains four properties: Left, top, right, and bottom. The distance between the sides of the element and the top and left of the page, respectively

注意：IE、Firefox3+、Opera9.5、Chrome、Safari支持，在IE中，默认坐标从(2,2)开始计算，导致最终距离比其他浏览器多出两个像素，我们需要做个兼容。

namely: Document.documentElement.clientTop; Non-IE is 0,ie for 2

Document.documentElement.clientLeft; Non-IE is 0,ie for 2

Functiong GetRect (Element) {

var rect = Element.getboundingclientrect ();

var top = Document.documentElement.clientTop;

var left= document.documentElement.clientLeft;

return{

Top:rect.top-top,

Bottom:rect.bottom-top,

Left:rect.left-left,

Right:rect.right-left

}

}

The principle and realization of picture lazy loading