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 相关文章推荐
js opener的使用详解
Jan 11 Javascript
分享10个原生JavaScript技巧
Apr 20 Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
Vue隐藏显示、只读实例代码
Jul 18 Javascript
vue-cli系列之vue-cli-service整体架构浅析
Jan 14 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 Javascript
浅谈Vue static 静态资源路径 和 style问题
Nov 07 Javascript
全面解析js中的原型,原型对象,原型链
Jan 25 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
利用PHP制作简单的内容采集器的原理分析
2008/10/01 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
javascript实现动态CSS换肤技术的脚本
2007/06/29 Javascript
通过身份证号得到出生日期和性别的js代码
2009/11/23 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
jQuery实现轮播图及其原理详解
2020/04/12 jQuery
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
Vue+Openlayers自定义轨迹动画
2020/09/24 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
通过C++学习Python
2015/01/20 Python
python在linux系统下获取系统内存使用情况的方法
2015/05/11 Python
Python中属性和描述符的正确使用
2016/08/23 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
Python3多线程操作简单示例
2018/05/22 Python
Python实现Event回调机制的方法
2019/02/13 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
django之导入并执行自定义的函数模块图解
2020/04/01 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
Python如何对齐字符串
2020/07/30 Python
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
澳大利亚时尚前卫设计师珠宝在线:Amber Sceats
2017/10/04 全球购物
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
国税会议欢迎词
2014/01/16 职场文书
国庆节文艺活动方案
2014/02/03 职场文书
园林技术专业求职信
2014/07/28 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书
python 逐步回归算法
2021/04/06 Python