首页 > Web开发 > 详细

延迟加载图片控件--echo.js

时间:2019-02-14 14:55:10      阅读:178      评论:0      收藏:0      [点我收藏+]
echo.js的github地址:https://github.com/toddmotto/echo
 
echo是一个独立的JavaScript、轻量级的、延迟图片加载插件,echo压缩后体积不到1k,使用html的标准data-*属性,echo支持IE8+。
 
 
一般将其放在滚动事件的下面:
<img class="lazy" src="tool/img.gif" :data-echo="i.url"/>
使用echo.js非常简单,在网页需要延迟加载的img标签中,设置data-echo属于指向需要加载的图片路径,src属性指向默认加载图片路径。然后引入echo.min.js,并初始化echo即可。

echo.init({
  offset: 0,
  throttle: 0 ,
  unload: false,
  callback: function (element, op) {
    console.log(element, ‘has been‘, op + ‘ed‘);//element是延迟加载的对象;
  }
});

常用参数及方法说明

 

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

 

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

echo.render();

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

 

 

 

 

 

 

 

 

延迟加载图片控件--echo.js

原文:https://www.cnblogs.com/wangtaolearning/p/10374422.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!