浏览器支持ie8+
<img src="img/blank.gif" alt="" data-echo="img/album-1.jpg">
<script>
window.echo = (function (window, document) {
'use strict';
/*
* Constructor function
*/
var Echo = function (elem) {
this.elem = elem;
this.render();
this.listen();
};
/*
* Images for echoing
*/
var echoStore = [];
/*
* Element in viewport logic
*/
var scrolledIntoView = function (element) {
var coords = element.getBoundingClientRect();
return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight));
};
/*
* Changing src attr logic
*/
var echoSrc = function (img, callback) {
img.src = img.getAttribute('data-echo');
if (callback) {
callback();
}
};
/*
* Remove loaded item from array
*/
var removeEcho = function (element, index) {
if (echoStore.indexOf(element) !== -1) {
echoStore.splice(index, 1);
}
};
/*
* Echo the images and callbacks
*/
var echoImages = function () {
for (var i = 0; i < echoStore.length; i++) {
var self = echoStore[i];
if (scrolledIntoView(self)) {
echoSrc(self, removeEcho(self, i));
}
//if (scrolledIntoView(self)) {
// echoSrc(self, removeEcho(self, i));
// continue;
// }
//
// i++;
// }
//if i == 0 and image echoStore[0] is now in the view, than handler it. After splice(i, 1); the next image u got to check is still echoStore[0], but the next loop check from 1 (i=1).and this cuz the following puzzle that some guys menstioned.
}
};
/*
* Prototypal setup
*/
Echo.prototype = {
init : function () {
echoStore.push(this.elem);
},
render : function () {
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', echoImages, false);
} else {
window.onload = echoImages;
}
},
listen : function () {
window.onscroll = echoImages;
}
};
/*
* Initiate the plugin
*/
var lazyImgs = document.querySelectorAll('img[data-echo]');
for (var i = 0; i < lazyImgs.length; i++) {
new Echo(lazyImgs[i]).init();
}
// [].forEach.call(document.querySelectorAll('img[data-echo]'), function (img) {
// new Echo(img).init();
//}
})(window, document);
</script>
使用的方法
<script>
Echo.init({
offset: 1100, //距离可视区
throttle: 50 //延迟时间
});
</script>