今天就跟大家聊聊有关JavaScript图片延迟加载微型库Echo.js是怎样的,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
回声。js是一个标准的独立的Javascript图片懒加载(延迟加载)库,它非常小巧快速,只有2 kb,它使用HTML5的数据- *属性,延迟请求加载图片资源,不依赖任意第三方插件库,特别适用于移动端需要加载大量图片的应用。
如何使用
1,引入文件
<代码类=癶tml”> & lt;脚本src=https://www.yisu.com/zixun/" js/echo.min.js "> 脚本> 代码>
2, html结构
<代码类=癶tml”> & lt; img src=https://www.yisu.com/zixun/癷mg/blank.gif”alt="照片" data-echo=" img/photo.jpg "> 代码>
blank.gif是一个1 x 1的图片,用做默认图片,data-echo的属性值是图片的真实地址。你可以给图片设置宽度和高度,或者在CSS中设置,否则似乎很底部很底部的图片才会延迟加载。
3, Javascript
<代码类=" js "> echo.init ({ ,100年,抵消: ,,油门:250, ,,卸载:假的, ,,回调函数:函数(元素,op) { ,,,console.log(& # 39;加载好# 39;公司); ,,} });代码>
常用参数及方法说明
参数描述默认值
抵消离可视区域多少像素的图片可以被加载0节流图片延迟多少毫秒加载250防反跳防抖动trueunload告诉回声是加载还是卸载视图中的图片,当图片离开视图区域时触发falsecallback回调函数,用来检测图片是否加载函数()
最后echo.js还提供了一个.render()方法,用法如下:
<代码类=" js "> echo.render(); 代码>
应用场景:当你的页面没有发生滚动,而你想加载即将要显示的图片,如图片轮播,当第一张图片显示完,接着滑动展示第二张图片,这个时候使用<代码> echo.render(); 代码>提前加载第二张图片,就不会出现图片加载卡顿白屏等现象。
看完上述内容,你们对JavaScript图片延迟加载微型库echo.js是怎样的有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注行业资讯频道,感谢大家的支持。