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控制div弹出层实现方法
May 11 Javascript
JavaScript中使用concat()方法拼接字符串的教程
Jun 06 Javascript
javascript实现图片上传前台页面
Aug 18 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 Javascript
select标签设置默认选中的选项方法
Mar 02 Javascript
以v-model与promise两种方式实现vue弹窗组件
May 21 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
JS数组方法reverse()用法实例分析
Jan 18 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
防止本地用户用fsockopen DDOS攻击对策
2011/11/02 PHP
php 批量替换html标签的实例代码
2013/11/26 PHP
PHP中$this和$that指针使用实例
2015/01/06 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
给Function做的OOP扩展
2009/05/07 Javascript
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
python中pycurl库的用法实例
2014/09/30 Python
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
python简单实现刷新智联简历
2016/03/30 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
Django进阶之CSRF的解决
2018/08/01 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
Python笔记之工厂模式
2019/11/20 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
触摸春天教学反思
2014/02/03 职场文书
工程建设实施方案
2014/03/14 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
运动会入场口号
2014/06/07 职场文书
会议室标语
2014/06/21 职场文书
2015年国培研修感言
2015/08/01 职场文书
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL