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请求,就会拉慢网页加载速度,用户体验不友好.怎么 ...
随机推荐
- NodeJS 第一天学习
NodeJS 第一天学习 严格模式 ECMAScript 5的严格模式是采用具有限制性JavaScript变体的一种方式,从而使代码显示地 脱离"马虎模式/稀松模式/懒散模式"(s ...
- Java取得环境变量和系统属性
取得所有的环境变量 public class GetEnvAndProp { public static void main(String[] args) { Map<String, Strin ...
- Json学习总结(2)——Java 下的 JSON库性能比较:JSON.simple vs. GSON vs. Jackson vs. JSONP
JSON已经成为当前服务器与WEB应用之间数据传输的公认标准,不过正如许多我们所习以为常的事情一样,你会觉得这是理所当然的便不再深入思考了.我们很少会去想用到的这些JSON库到底有什么不同,但事实上它 ...
- Mahout推荐算法API具体解释【一起学Mahout】
阅读导读: 1.mahout单机内存算法实现和分布式算法实现分别存在哪些问题? 2.算法评判标准有哪些? 3.什么会影响算法的评分? 1. Mahout推荐算法介绍 Mahout推荐算法,从数据处理能 ...
- 【Linux编程】socket编程
套接字是通信端点的抽象.文件描写叙述符用open函数创建,而套接字描写叙述符用socket函数创建.socket函数原型例如以下: int socket(int domain, int type, i ...
- C#获取本机内网外网IP
using System.Net; # region 获取内.外网Ip /// <summary> /// 获取本地ip地址,优先取内网ip /// </summary> pu ...
- mysql-高级语言语法
一.注释 从#字符到行尾 从'-- '序列到行尾.两个破折号之后至少要有一个空格符或制表符. 二.设置变量 用户变量的形式为@var_name,其中变量名varname可以有当前字符集的文字数字字符. ...
- Unity游戏开发--30s制作精美地图
"君子生非异也.善假于物也"--<劝学>荀子 引用这句话的目的,是我觉得有时候.利用工具来提高游戏开发效率是很必要的. 利用工具,解放程序员双手. 今天想给大家介绍下. ...
- Codeforces 559B Equivalent Strings 等价串
题意:给定两个等长串a,b.推断是否等价.等价的含义为:若长度为奇数,则必须是同样串.若长度是偶数,则将两串都均分成长度为原串一半的两个子串al,ar和bl,br,当中al和bl等价且ar和br等价, ...
- 使用sshfs来挂载远程的文件
只要安装sshfs就可以通过ssh的端口来远程挂载文件夹, 不需要其他额外的配置非常的方便. 这个软件在只有ssh权限的情况下远程范围文件是非常有用的. 1. 安装sshfs 2. 用法非常简单 ...