JavaScript 图像延迟加载库：Echo.js
jopen
11年前
Echo 是一个独立的 JavaScript 懒加载图像的工具，快速、体积小（不足1k）和使用 HTML5 的 data- 属性。Echo 支持 IE8+ 。
示例代码：
<img src="img/blank.gif" alt="" data-echo="img/album-1.jpg">
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)); } } }; /* * 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(); } })(window, document);