10betEcho.js图片延迟加载微型库

时间: 2019-09-23阅读: 48标签: 库

JavaScript图像延迟加载库Echo.js，javascriptecho.js

Echo 是一个独立的 JavaScript 懒加载图像的工具，快速、体积小（不足1k）和使用 HTML5 的 data- 属性。Echo 支持 IE8+ 。

插件描述：和 Lazy Load 一样，Echo.js 也是一个用于图像延迟加载 JavaScript。不同的是 Lazy Load 是基于 jQuery 的插件，而 Echo.js 不依赖于 jQuery 或其他 JavaScript 库，可独立使用。并且 Echo.js 非常小巧，压缩后不足 1KB。

兼容性**
**

Echo.js 使用了 HTML5 的 date 属性，并且需要获取该属性的值，所以它并不兼容 IE6、IE7。虽然 Lazy Load 也使用了 HTML5 的 date 属性，但它获取值的方法不一样。

使用方法

　　1、引入文件

复制代码 代码如下:
<script src="js/echo.min.js"></script>

　　2、HTML

复制代码 代码如下:
<img src="images/blank.gif" alt="pic" data-echo="img/pic.jpg" width="640" height="480">

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

　　3、JavaScript

Echo.init({
offset: 0,
throttle: 0
}); 

参数

以上内容是针对JavaScript图像延迟加载库Echo.js ，希望对大家有所帮助！

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

您可能感兴趣的文章:

• 利用JS延迟加载百度分享代码,提高网页速度
• js图片延迟加载的实现方法及思路
• 鼠标划过实现延迟加载并隐藏层的js代码
• 几种延迟加载JS代码的方法加快网页的访问速度
• jquery插件lazyload.js延迟加载图片的使用方法
• Jquery图片延迟加载插件jquery.lazyload.js的使用方法
• 浅析js预加载/延迟加载

http://www.bkjia.com/Javascript/1116459.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1116459.htmlTechArticleJavaScript图像延迟加载库Echo.js，javascriptecho.js Echo 是一个独立的 JavaScript 懒加载图像的工具，快速、体积小（不足1k）和使用 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 中设置，否则似乎很底部很底部的图片才会延迟加载。

本文由10bet发布于Web前端,转载请注明出处：10betEcho.js图片延迟加载微型库

关键词：