人靠衣装,机靠壳装

Echo.js图片懒加载(延迟加载)代码插件

2017-04-22 08:38 发布

00
admin
湖南省 长沙市
  • 粉丝3

  • 关注0

  • 动态2

Echo.js图片懒加载(延迟加载)代码插件.jpg


Echo.js是一个标准的独立的Javascript图片懒加载(延迟加载)库,它非常小巧快速,只有2KB,它使用HTML5的 data-*属性,延迟请求加载图片资源,不依赖任意第三方插件库,特别适用于移动端需要加载大量图片的应用。


blank.gif 是一个 1 x 1 的图片,用做默认图片,data-echo 的属性值是图片的真实地址。你可以给图片设置宽度和高度,或者在 CSS 中设置,否则似乎很底部很底部的图片才会延迟加载。


常用参数及方法说明


参数描述默认值
offset离可视区域多少像素的图片可以被加载0
throttle图片延迟多少毫秒加载250
debounce防抖动true
unload告诉echo是加载还是卸载视图中的图片,当图片离开视图区域时触发false
callback回调函数,用来检测图片是否加载function()

最后echo.js还提供了一个.render()方法,用法如下:

echo.render();

应用场景:当你的页面没有发生滚动,而你想加载即将要显示的图片,如图片轮播,当第一张图片显示完,接着滑动展示第二张图片,这个时候使用echo.render();提前加载第二张图片,就不会出现图片加载卡顿白屏等现象。

授权方式:共享版

适合环境: Chrome/Firefox/Opera/Safari/IE9+

猜你喜欢
更多发现
子导航JS代码
招联好期贷