Echo.js是一个标准的独立的Javascript图片懒加载（延迟加载）库，它非常小巧快速，只有2KB，它使用HTML5的 data-*属性，延迟请求加载图片资源，不依赖任意第三方插件库，特别适用于移动端需要加载大量图片的应用。
如何使用
1、引入文件
- <script src=“js/echo.min.js”></script>
2、HTML结构
- <img src=“img/blank.gif” alt=“Photo” data-echo=“img/photo.jpg” />
blank.gif 是一个 1 x 1 的图片，用做默认图片，data-echo 的属性值是图片的真实地址。你可以给图片设置宽度和高度，或者在 CSS 中设置，否则似乎很底部很底部的图片才会延迟加载。
3、JavaScript
- echo.init({
- offset: 100,
- throttle: 250,
- unload: false,
- callback: function (element, op) {
- console.log(‘loaded ok.’);
- }
- });
常用参数及方法说明
| 参数 | 描述 | 默认值 |
| offset | 离可视区域多少像素的图片可以被加载 | 0 |
| throttle | 图片延迟多少毫秒加载 | 250 |
| debounce | 防抖动 | true |
| unload | 告诉echo是加载还是卸载视图中的图片，当图片离开视图区域时触发 | false |
| callback | 回调函数，用来检测图片是否加载 | function() |
最后echo.js还提供了一个.render()方法，用法如下：
- echo.render();
应用场景：当你的页面没有发生滚动，而你想加载即将要显示的图片，如图片轮播，当第一张图片显示完，接着滑动展示第二张图片，这个时候使用echo.render();提前加载第二张图片，就不会出现图片加载卡顿白屏等现象。
Echo.js：
[cc lang=”js”]
/*! echo-js v1.7.3 | (c) 2016 @toddmotto | https://github.com/toddmotto/echo */
!function(t,e){“function”==typeof define&&define.amd?define(function(){return e(t)}):”object”==typeof exports?module.exports=e:t.echo=e(t)}(this,function(t){“use strict”;var e,n,o,r,c,a={},u=function(){},d=function(t){return null===t.offsetParent},l=function(t,e){if(d(t))return!1;var n=t.getBoundingClientRect();return n.right>=e.l&&n.bottom>=e.t&&n.left<=e.r&&n.top<=e.b},i=function(){(r||!n)&&(clearTimeout(n),n=setTimeout(function(){a.render(),n=null},o))};return a.init=function(n){n=n||{};var d=n.offset||0,l=n.offsetVertical||d,f=n.offsetHorizontal||d,s=function(t,e){return parseInt(t||e,10)};e={t:s(n.offsetTop,l),b:s(n.offsetBottom,l),l:s(n.offsetLeft,f),r:s(n.offsetRight,f)},o=s(n.throttle,250),r=n.debounce!==!1,c=!!n.unload,u=n.callback||u,a.render(),document.addEventListener?(t.addEventListener("scroll",i,!1),t.addEventListener("load",i,!1)):(t.attachEvent("onscroll",i),t.attachEvent("onload",i))},a.render=function(n){for(var o,r,d=(n||document).querySelectorAll("[data-echo], [data-echo-background]"),i=d.length,f={l:0-e.l,t:0-e.t,b:(t.innerHeight||document.documentElement.clientHeight)+e.b,r:(t.innerWidth||document.documentElement.clientWidth)+e.r},s=0;i>s;s++)r=d[s],l(r,f)?(c&&r.setAttribute(“data-echo-placeholder”,r.src),null!==r.getAttribute(“data-echo-background”)?r.style.backgroundImage=”url(“+r.getAttribute(“data-echo-background”)+”)”:r.src!==(o=r.getAttribute(“data-echo”))&&(r.src=o),c||(r.removeAttribute(“data-echo”),r.removeAttribute(“data-echo-background”)),u(r,”load”)):c&&(o=r.getAttribute(“data-echo-placeholder”))&&(null!==r.getAttribute(“data-echo-background”)?r.style.backgroundImage=”url(“+o+”)”:r.src=o,r.removeAttribute(“data-echo-placeholder”),u(r,”unload”));i||a.detach()},a.detach=function(){document.removeEventListener?t.removeEventListener(“scroll”,i):t.detachEvent(“onscroll”,i),clearTimeout(n)},a});
[/cc]
原创文章，作者：老D，如若转载，请注明出处：https://laod.cn/3427.html
