ECHO.js 纯javascript轻量级延迟加载的实例代码
更新时间:2016年05月24日 16:09:48 投稿:jingxian
下面小编就为大家带来一篇ECHO.js 纯javascript轻量级延迟加载的实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
ECHO.js 纯javascript轻量级延迟加载的实例代码
演示
<!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;}
很方便,很实用。
要想进一步提升网页打开速度,可以优化上传的图片。
网页慢,无非是,一查询慢,二图片加载慢,三没有使用延迟加载,四图片数据太大。
根据这些原因,逐步解决。
提升用户体验。
以上这篇ECHO.js 纯javascript轻量级延迟加载的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Javascript语言对继承实现的并不好,需要工程师自己去实现一套完整的继承机制。下面我们由浅入深的系统掌握使用javascript继承的技巧,对javascript继承相关知识感兴趣的朋友一起看看吧2015-12-12JavaScript setTimeout和setInterval的使用方法 说明
两个函数都是可以用来实现一段时间后执行一段javascript代码的效果。两个函数都有两个参数,前面的都是执行表达式,后面的是隔的秒数。2010-03-03javascript利用apply和arguments复用方法
这篇文章主要介绍了javascript利用apply和arguments复用方法,有需要的朋友可以参考一下2013-11-11
最新评论