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 相关文章推荐
javascript 可以拖动的DIV(二)
Jun 26 Javascript
基于jQuery的弹出框插件
Mar 18 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
Nov 03 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
Dec 19 Javascript
jQuery中dequeue()方法用法实例
Dec 29 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
简述vue状态管理模式之vuex
Aug 29 Javascript
简单了解小程序+node梳理登陆流程
Jun 24 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
KnockoutJS数组比较算法实例详解
Nov 25 Javascript
详解vue-router的Import异步加载模块问题的解决方案
May 13 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无法访问远程mysql的问题分析及解决
2013/05/16 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
详解参数传递四种形式
2015/07/21 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
微信小程序 欢迎界面开发的实例详解
2016/11/30 Javascript
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
react中使用swiper的具体方法
2018/05/15 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
使用nodejs分离html文件里的js和css详解
2019/04/12 NodeJs
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
利用Python抓取行政区划码的方法
2016/11/28 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
python内存管理机制原理详解
2019/08/12 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
Python tkinter布局与按钮间距设置方式
2020/03/04 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
自荐信结尾
2013/10/27 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫
openstack云计算keystone组件工作介绍
2022/04/20 Servers