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请求,就会拉慢网页加载速度,用户体验不友好.怎么 ...
随机推荐
- Linux Kernel 5.1 RC5发布
我们距离正式的Linux 5.1内核发布还有不到一个月的时间,而今天Linus Torvalds宣布推出预期的Linux Kernel 5.1 RC5版本.Linus Torvalds专门评论了Lin ...
- Maven学习总结（22）——Maven常用插件介绍
我们都知道Maven本质上是一个插件框架,它的核心并不执行任何具体的构建任务,所有这些任务都交给插件来完成,例如编译源代码是由maven- compiler-plugin完成的.进一步说,每个任务对应 ...
- POJ——T3259 Wormholes
http://poj.org/problem?id=3259 Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 50692 ...
- 继续过Hard题目.周五
# Title Editorial Acceptance Difficulty Frequency . 65 Valid Number 12.6% Hard . 126 Word ...
- HNU13377:Book Club(DFS)
Problem description Porto's book club is buzzing with excitement for the annual book exchange event! ...
- android常用控件的使用方法
引言 xml很强大 TextView <TextView android:id="@+id/text_view" android:layout_width="mat ...
- zzulioj--1827--石锅全拌(区间求和水题)
1827: 石锅全拌 Time Limit: 1 Sec Memory Limit: 128 MB Submit: 6 Solved: 3 SubmitStatusWeb Board Descri ...
- 10.Intellij IDEA svn的使用详解
转自:https://www.2cto.com/kf/201703/614858.html 首先提一句,IDEA对各种的版本控制工具的支持是非常好的,打开系统设置界面,就可以看到他有专门的一栏 Ver ...
- POJ 3273 二分答案
思路:二分答案经典题吧....注意边界就OK了 //By SiriusRen #include <cstdio> #include <algorithm> using name ...
- C语言基础-第六章
数组和字符串 1.一维数组 数组当中最简单的数据 声明: 类型说明符 数组名[常量表达式] int a[3];说明a的长度为3,那么给a赋值的语句是:a={1,2,3}; 2.多维数组 2.1 二维数 ...