<img src="默认图片" data-echo="真正图片地址" width="800" height="800" alt="">
<img src="默认图片" data-echo="真正图片地址" width="800" height="800" alt="">
<img src="默认图片" data-echo="真正图片地址" width="800" height="800" alt="">
<img src="默认图片" data-echo="真正图片地址" width="800" height="800" alt="">
<img src="默认图片" data-echo="真正图片地址" width="800" height="800" alt="">
</body>
<script src="echo.js"></script>
<script>
window.onload = function(){
Echo.init({
offset: 200, //设置图片距离可视区域多少像素被加载（纵向）
throttle: 1050 //设置图片延迟加载的时间
});
}
</script>
echo.js 代码
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 _pollImages = function() {
for (var i = store.length; i--;) {
var self = store[i];
if (_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);
3295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
