ECHO.js 纯javascript轻量级延迟加载的实例代码


Posted in Javascript onMay 24, 2016

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 相关文章推荐
基于jQuery的获取标签名的代码
Jul 16 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
javascript中取前n天日期的两种方法分享
Jan 26 Javascript
jQuery移动端图片上传组件
Jun 12 Javascript
基于JS实现类似支付宝支付密码输入框
Sep 02 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 Javascript
layDate插件设置开始和结束时间
Nov 15 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
Apr 22 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 #Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 #Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 #Javascript
JavaScript中判断数据类型的方法总结
May 24 #Javascript
JS实现回到页面顶部动画效果的简单实例
May 24 #Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
May 24 #Javascript
JS 清除字符串数组中,重复元素的实现方法
May 24 #Javascript
You might like
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
php微信开发之自定义菜单实现
2016/11/18 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
jquery select选中的一个小问题
2009/10/11 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
JavaScript用Number方法实现string转int
2014/05/13 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
JS常用字符串方法(推荐)
2021/01/15 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
javascript轮播图算法
2016/10/21 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
vant组件中 dialog的确认按钮的回调事件操作
2020/11/04 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
virtualenv实现多个版本Python共存
2017/08/21 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
学习Python爬虫的几点建议
2020/08/05 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
结构工程研究生求职信
2013/10/13 职场文书
鼓励运动员的广播稿
2014/02/08 职场文书
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
物业总经理岗位职责
2014/02/28 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
优秀教师单行材料
2014/12/16 职场文书
七年级作文之雪景
2019/11/18 职场文书
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android