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

来源:http://www.chinese-glasses.com 作者:Web前端 人气:103 发布时间:2020-04-22
摘要:时间: 2019-09-23阅读: 48标签: 库 JavaScript图像延迟加载库Echo.js,javascriptecho.js Echo是一个独立的 JavaScript 懒加载图像的工具,快速、体积小(不足1k)和使用HTML5 的 data- 属性。Echo 支持 IE

时间: 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
}); 

参数

参数

说明

offset 离可视区域多少像素的图片可以被加载
throttle 图片延迟多少毫秒加载

以上内容是针对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图片延迟加载微型库

关键词:

最火资讯