js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用
js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用
一、总结
一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载的基础上面加上了动画效果,比如fade
使用的话简单到爆,倒是没有什么好说。
二、图片懒加载echo.js结合 Amaze UI ScrollSpy 使用
百度盘下载地址:
链接:https://pan.baidu.com/s/1TiZ2u6itIj4q9gVVpwQ5tg 密码:ceko
1、截图
2、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./amazeui.min.css">
<script src="./jquery.min.js"></script>
<script src="./amazeui.min.js"></script>
<script src="./echo.js"></script>
</head>
<body>
<div>
<img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png">
<img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png">
<img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png">
<img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png">
<img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png">
<img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png">
<img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png">
<img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png">
</div>
</body>
<!-- <script>
echo.init({
offset: 100,
throttle: 250,
unload: false,
callback: function (element, op) {
console.log(element, 'has been', op + 'ed')
}
}); // echo.render(); is also available for non-scroll callbacks
</script> --> <script>
echo.init({
callback: function(element, op) {
if (op === 'load') {
$(element).scrollspy({animation:'fade'});
}
console.log(element, 'has been', op + 'ed')
}
});
</script>
</html>
代码的效果就是懒加载的基础上面加上了fade的效果,也就是动画的效果
js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的更多相关文章
- js插件---图片懒加载lazyload
js插件---图片懒加载lazyload 一.总结 一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.laz ...
- js原生图片懒加载 或 js原生图片预加载,html标签自定义属性
使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载 当访问一个页面的时候,先把img元素或是其他元素的 ...
- 图片懒加载 echo.js
(function (root, factory) { if (typeof define === 'function' && define.amd) { define(functio ...
- 插件:★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js
插件:图片懒加载 jquery.lazyload.js 2016-3-31 插件说明:http://www.w3cways.com/1765.html (小插件,好用) 下载地址: https://r ...
- 页面性能优化-原生JS实现图片懒加载
在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...
- Js 之图片懒加载插件
一.PC端(lazyload) 1.引入js文件 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.m ...
- JS实现图片懒加载插件
一.前言 我在前几篇博客的记录中,有说自己在做一个图片懒加载的功能,然后巴拉巴拉的遇到哪些问题,结果做完了也没对懒加载这个功能做一些记录,所以这篇文章主要针对我所实现的思路,以及代码做个记录,实现不佳 ...
- 图片懒加载lazyload.js详解
简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. ...
- 图片懒加载--lazyload.js的用法
这几天公司的项目已经完成的差不多了,只剩下各种优化问题.今天着重于图片加载的优化.当一个页面需要下拉很长而且又有过多的图片要加载时,就会发生很多http请求,就会拉慢网页加载速度,用户体验不友好.怎么 ...
随机推荐
- NOIp2018模拟赛四十五~??
欠的太多,咕了咕了 最近复赛临近时间紧,就不每次都写感想和题解了,只写点有意义的好题
- webpack 操作
依赖安装 : 全局安装webpack : sudo npm install webpack -g 本地安装webpack : npm install webpack —save-dev 需要注意的 ...
- UVA 11248 Frequency Hopping
Frequency Hopping Time Limit: 10000ms Memory Limit: 131072KB This problem will be judged on UVA. Ori ...
- mysql-通过例子解释四种隔离级别
SQL标准定义了4种隔离级别,包括了一些具体规则,用来限定事务内外的哪些改变是可见的,哪些是不可见的. 低级别的隔离级一般支持更高的并发处理,并拥有更低的系统开销. 首先,我们使用 test 数据库, ...
- Linux路由表的抽象扩展应用于nf_conntrack
思想 标准IP路由查找的过程为我们提供了一个极好的"匹配-动作"的例程. 即匹配到一个路由项.然后将数据包发给该路由项指示的下一跳.假设我们把上面对IP路由查找的过程向上抽象一个层 ...
- Java 深拷贝和浅拷贝 利用序列化实现深拷贝
Java 深拷贝和浅拷贝 转自:http://www.cnblogs.com/mengdd/archive/2013/02/20/2917971.html 深拷贝(deep clone)与浅拷贝(sh ...
- C#共享WIFI能通过代码控制给连接的移动端分配IP么
用C#创建了一个虚拟WIFI,但是能不能通过代码来给连接上的移动端分配各自的IP.之前都是自动分配的IP.望大神们赐教 C#共享WIFI能通过代码控制给连接的移动端分配IP么 >> csh ...
- Kinect 人机交互开发实践
Kinect for Windows SDK 骨骼追踪 —— 对在Kinect视野范围内移动的一个或两个人进行骨骼追踪,可追踪到人体的20个节点 深度摄像头 —— 通过深度传感器获取到视野内的环境三维 ...
- Mac配置PHP环境
本文章来自:http://blog.csdn.net/wj_november/article/details/51417491 本人使用的是:MacOs 10.12.3,根据如上操作已经安装成功,感谢 ...
- DedeCMS文章编辑不更新时间1970年1月1日
在修改文章或者后期优化的时候,织梦dedecms5.7版本存在一个问题,修改文章的同时也修改了文章的发布时间,这个功能可能有些人比较需要,但同时也有些站长朋友又不需要,因为我们编辑某个文章的时候,发现 ...