简单的JavaScript图像延迟加载库Echo.js
插件描述:和 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="data: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的更多相关文章
- 简单的Javascript图片延迟加载库Echo.js
简介: 和 Lazy Load 一样,Echo.js 也是一个用于图像延迟加载 JavaScript.不同的是 Lazy Load 是基于 jQuery 的插件,而 Echo.js 不依赖于 jQue ...
- JavaScript语法高亮库highlight.js使用
highlight.js是一款基于JavaScript的语法高亮库,目前支持125种编程语言,有63种可供选择的样式,而且能够做到语言自动识别,和目前主流的JS框架都能兼容,可以混合使用. 这款高亮库 ...
- javascript模块化编程库require.js的用法
随着javascript的兴起,越来越多的公司开始将JS模块化,以增加开发的效率和减少重复编写代码的.更是为了能更加容易的维护日后的代码,因为现在的随着人们对交互效果的越来越强烈的需求,我们的JS代码 ...
- ECHO.js 纯javascript轻量级延迟加载
演示 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf ...
- 如何使用echo.js实现图片的懒加载(整理)
如何使用echo.js实现图片的懒加载(整理) 一.总结 一句话总结:a.在img标签中添加data-echo属性加载真实图片:<img class="loading" sr ...
- Echo.js – 简单易用的 JavaScript 图片延迟加载插件
Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...
- 延迟加载外部js文件,延迟加载图片(jquery.lazyload.js和echo,js)
js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...
- echo.js 延迟加载图片控件
echo.js的github地址:https://github.com/toddmotto/echo echo是一个独立的JavaScript.轻量级的.延迟图片加载插件,echo压缩后体积不到1 ...
- 延迟加载图片控件--echo.js
echo.js的github地址:https://github.com/toddmotto/echo echo是一个独立的JavaScript.轻量级的.延迟图片加载插件,echo压缩后体积不到1 ...
随机推荐
- h5-上传图片预览
<div class="content_sq" style="position:relative;"> <img src="imag ...
- 微信小程序-遍历列表
#index.js data: { "messg":"helloworld1111", "items":[ {"name" ...
- yii2 模板twig中使用GridView::widget
yii框架twig模板中使用GridView::widget 需要这样写: {{ grid_view_widget({ 'dataProvider': provider, 'columns': [ ' ...
- POJ-3660.Cow Contest(有向图的传递闭包)
Cow Contest Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 17797 Accepted: 9893 De ...
- SSM商城开发学习
功能模块:前端:门户.商品搜索.商品展示.购物车.注册&登录 后端:商品管理.订单管理.cms 上线,bug,维护,停到上线,维护,打包,上线 某一个模块出现bug,停到这个模块 tomcat ...
- XML Linq 学习笔记
XML如下: <?xml version="1.0" encoding="utf-8"?> <Dishes> <Dish> ...
- Zookeeper使用--命令行
一.前言 在学习了Zookeeper相关的理论知识后,下面接着学习对Zookeeper的相关操作. 二.Zookeeper部署 Zookeeper的部署相对来说还是比较简单. Zookeeper有三种 ...
- SpringMVC 使用PUT请求遇到的问题小结
最近在使用REST风格的URL进行CURD操作的学习过程中 发现使用PUT请求时候提交表单进行修改操作 报错:Request method 'PUT' not supported 在网上查找资料发现是 ...
- netty服务器端启动
package com.imooc.netty.ch3; import com.imooc.netty.ch6.AuthHandler; import io.netty.bootstrap.Serve ...
- appium定位toast消息的使用
定位使用xpath后,定位消息文本,然后使用text获取消息文本做断言.toast_loc = ("xpath", ".//*[contains(@text,'切换运营商 ...