ECHO.js 纯javascript轻量级延迟加载
2016-04-16 14:44
399 查看
演示
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>简单的JavaScript图像延迟加载库Echo.js</title> <style> .demo img { width: 736px; height: 490px; background: url(images/loading.gif) 50% no-repeat;} </style> </head> <body> <h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">简单的JavaScript图像延迟加载库Echo.js演示</h1> <div class="demo" style="width: 736px; margin: 0 auto;"> <img class="lazy" src="images/blank.gif" data-echo="images/big-1.jpg"> <img class="lazy" src="images/blank.gif" data-echo="images/big-2.jpg"> <img class="lazy" src="images/blank.gif" data-echo="images/big-3.jpg"> <img class="lazy" src="images/blank.gif" data-echo="images/big-4.jpg"> <img class="lazy" src="images/blank.gif" data-echo="images/big-5.jpg"> <img class="lazy" src="images/blank.gif" data-echo="images/big-6.jpg"> <img class="lazy" src="images/blank.gif" data-echo="images/big-7.jpg"> </div> <script src="js/echo.min.js"></script> <script> Echo.init({ offset: 0, throttle: 0 }); </script>
应用
1.引入js,并初始化
<script src="{sh::PUB}js/echo.min.js"></script> <script> Echo.init({ offset: 0, throttle: 0 }); </script>
2.给图片附上属性
<img class="lazy" src="{sh::PUB}img/common/blank.gif" data-echo="{sh:$goods.logoimg}" alt="">
3.给未加载的图片设置默认背景,动态的gif
.lazy{width:100%;height:100%;background: url({sh::PUB}img/common/loading.gif) 50% no-repeat;}
很方便,很实用。
要想进一步提升网页打开速度,可以优化上传的图片。
网页慢,无非是,一查询慢,二图片加载慢,三没有使用延迟加载,四图片数据太大。
根据这些原因,逐步解决。
提升用户体验。
相关文章推荐
- json-lib.jar开发包及依赖包的下载地址
- JSON-lib框架,转换JSON、XML不再困难
- JS实现重载
- [学习笔记]JavaScript进阶
- [学习笔记]JavaScript基础
- [学习笔记]用Javascript实现Windows任务管理器
- [学习笔记]jsp web.xml文件的作用及基本配置
- [学习笔记]JS获取当前日期,年月日
- [学习笔记]JS获取指定日期前一天
- [学习笔记]JS全选反选
- [学习笔记]JS四舍五入方法
- [学习笔记]JS下拉框赋值
- [学习笔记]zTree是一个很好的js插件实现加载树形结构
- [学习笔记]JavaScript之DOM基础
- js实现touch移动触屏滑动事件
- 关于href="javascript:void 0;"
- [学习笔记]JSTL使用总结(1)
- [学习笔记]JSTL使用总结(2)
- js变量提升的一个小坑
- [学习笔记]JSP自定义标签(1)