ajax实现懒加载的原理,jQuery 图片懒加载原理

为什么要懒加载(延迟)

对于图片过多的页面，为了加速页面加载速度，

所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。

这样子对于页面加载性能上会有很大的提升，也提高了用户体验。

如何实现

其实原理上很简单，在页面载入的时候将页面上的img标签的src指向一个小图片，

把真实地址存放在一个自定义属性中，这里我用data-src来存放，如下。

然后将页面img标签获取并保存，开启一个定时器，遍历保存的img标签，

判断其位置是否出现在了可视区域内。如果出现在可视区域了那么就把真实的src地址给赋值上。

并且从数组中删除，避免重复判断。 那么你可能会问，如何判断是否出现在可视区域内吗？

那就是你可以获取当前img的相对于文档顶的偏移距离减去scrollTop的距离，

然后和浏览器窗口高度在进行比较，如果小于浏览器窗口则出现在了可视区域内了，

反之，则没有。

实现：

这是来自一个老外的一段懒加载的代码，代码很小，1k不到，

很适合用在移动设备上，在兼容上没做ie下的兼容，

这个你如要要用，你也可以自己去实现一个兼容性更强的。

好了，直接上代码了。

/*! Echo v1.4.0 | (c) 2013 @toddmotto | MIT license | github.com/toddmotto/echo */

window.Echo = (function (window, document, undefined) {

'use strict';

var store = [], offset, throttle, poll;

var _inView = function (el) {

var coords = el.getBoundingClientRect();

return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset));

};

var _isDeal = function(el){

return el.getAttribute('src') === el.getAttribute('data-echo');

}

var _pollImages = function () {

for (var i = store.length; i--;) {

var self = store[i];

if (!_isDeal(self) && _inView(self)) {

self.src = self.getAttribute('data-echo');

store.splice(i, 1);

}

}

};

var _throttle = function () {

clearTimeout(poll);

poll = setTimeout(_pollImages, throttle);

};

var init = function (obj) {

var nodes = document.querySelectorAll('[data-echo]');

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);