Echo.js图片延迟加载微型库

更新日期: 2019-09-23 阅读: 2.5k 标签: 

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();提前加载第二张图片,就不会出现图片加载卡顿白屏等现象。


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/7013

相关推荐

十个最流行的前端 CSS 库

前端 CSS 库,可以帮助用户分担样式设计,从而显著提高原型制作速度;用户则可以凭借前端框架,更加轻松地构建起直观的可用应用程序。目前市场上存在大量前端框架可供选择,本篇文章的主要内容就是关于那些目前最为流行且常用的框架

math.js_灵活强大的JavaScript数学库

math.js是一个广泛应用于JavaScript 和 Node.js的数学库,它的特点是灵活表达式解析器,支持符号计算,内置大量函数与常量,并提供集成解决方案来处理不同的数据类型,如数字,大数字,复数,分数,单位和矩阵。

15个有趣的Javascript 和CSS库

让你了解到新兴和酷炫的web 开发趋势. 精心挑选发布一些认为大家值得关注的库:Direction Reveal、Carbon、Аxios、Jarvis、Toast UI Editor、Micron.js、lit

GoJS的使用

GoJS是用于实现交互式图的JavaScript库。GoJS是依赖HTML5功能的JavaScript库,每个GoJS图表都包含在<div>您的HTML页面的HTML元素中

34 个最受欢迎的 JavaScript 库

直接开门见山,看看有哪些好用受欢迎的库值得我们使用。nodemon在编写调试Node.js项目,修改代码后,需要频繁的手动close掉,然后再重新启动,非常繁琐。现在,我们可以使用nodemon这个工具

React Native 常用的 15 个库

本篇 React native 库列表不是从网上随便找的, 这些是我在我的应用中亲自使用的库。 这些库功能可能跟其它库也有,但经过大量研究并在我的程序中尝试后,我选择了这些库。

12 个评估 JS 库你需要关心的事

当你调研一个 JS 库,功能当然是最重要的。作者给出了从 12 个角度全面分析 JS 库的可用性,分别是:特性,稳定性,性能,包生态,社区,学习曲线,文档,工具,发展历史,团队,兼容性,趋势

前端常用的CSS动画库

动效设计一直都是最近几年前端开发的热门趋势之一。动画是Web和UI设计的主要内容。一个完全静止的网站,即使是使用了微妙的悬停状态,也可能感觉不一样。如果缺少动画,就像缺少必要的东西一样。

推荐 11 个好用的 JS 动画库

Three.js超过46K的星星,这个流行的库提供了非常多的3D显示功能,以一种直观的方式使用 WebGL。这个库提供了<canvas>、 <svg>、CSS3D 和 WebGL渲染器,让咱们在设备和浏览器之间创建丰富的交互体验

JavaScript 社区由一个库引发的“smoosh门”事件到底怎么回事?

一项名为 JavaScript 功能的提案 Array.prototype.flatten 证明与 Web 不兼容。在 Firefox Nightly 中发布该功能会导致至少一个受欢迎的网站中断。鉴于有问题的代码是广泛使用的 MooTools 库的一部分,很可能会有更多网站受到影响。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!