js插件---图片懒加载lazyload
js插件---图片懒加载lazyload
一、总结
一句话总结：使用异常简单，src里面放加载的图片，data-original里面放原图片，不懂的位置去官网或者github找API就好。
1、lazyload官网的API演示怎么找到？
跟着github上面的网址一级一级的摸上去的，github上面显示的资料有限
官网地址：Lazyload Images After Five Second Delay
https://appelsiini.net/projects/lazyload/timeout/
2、延时加载怎么实现？
直接放到window的load方法里面等5s就好，
window.addEventListener("load", function(event) {
let timeout = setTimeout(function() {
$("img.lazy").lazyload({
effect : 'fadeIn',
event : 'sporty'
});
}, 5000);
});
$("img.lazy").lazyload()
这句话是正常的运行懒加载
二、图片懒加载lazyload
百度盘下载地址：
链接：https://pan.baidu.com/s/1MVLxVWgTAyke1smT0kVacQ 密码：ikn4
1、截图
2、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.min.js"></script>
<script src="amazeui.lazyload.js"></script>
<style>
.lazy {
margin: 10px auto;
background: url(docs/img/loading.gif) no-repeat center center;
}
</style>
</head>
<body>
<img class="lazy" src="docs/img/loading.gif" data-original="docs/img/bmw_m1_hood.jpg" width="640" height="480"> <div id="container">
<button type="button" class="am-btn am-btn-danger">点击载入图片</button>
</div> <div class="lazy" data-original="docs/img/bmw_m1_hood.jpg" style="width: 765px; height: 574px;"></div>
</body>
<script> window.addEventListener("load", function(event) {
let timeout = setTimeout(function() {
$("img.lazy").lazyload({
effect : 'fadeIn',
event : 'sporty'
});
}, 5000);
}); $('#container').one('click', function() {
$('#container').load('test.html', function(response, status, xhr) {
$('img.lazy').lazyload();
});
}); $('div.lazy').lazyload({
effect : 'fadeIn'
});
</script>
</html>
js插件---图片懒加载lazyload的更多相关文章
- js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用
js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用 一.总结 一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...
- jQuery插件图片懒加载lazyload
来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...
- 插件：★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js
插件:图片懒加载 jquery.lazyload.js 2016-3-31 插件说明:http://www.w3cways.com/1765.html (小插件,好用) 下载地址: https://r ...
- [js开源组件开发]图片懒加载lazyload
图片懒加载lazyload 前端对请求的一种优化方式,为什么叫懒加载,无从查起,反正我当初一直认为它是滚动加载的一种类型.它主要是以图片或背景在可视区域内时才显示真正的图片,减少src带来的负荷.所以 ...
- 页面性能优化-原生JS实现图片懒加载
在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...
- 图片懒加载lazyload.js详解
简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. ...
- Js 之图片懒加载插件
一.PC端(lazyload) 1.引入js文件 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.m ...
- 图片懒加载--lazyload.js的用法
这几天公司的项目已经完成的差不多了,只剩下各种优化问题.今天着重于图片加载的优化.当一个页面需要下拉很长而且又有过多的图片要加载时,就会发生很多http请求,就会拉慢网页加载速度,用户体验不友好.怎么 ...
- JS实现图片懒加载插件
一.前言 我在前几篇博客的记录中,有说自己在做一个图片懒加载的功能,然后巴拉巴拉的遇到哪些问题,结果做完了也没对懒加载这个功能做一些记录,所以这篇文章主要针对我所实现的思路,以及代码做个记录,实现不佳 ...
随机推荐
- [arc076f]Exhausted? - 贪心
题意: 给你m个椅子可以坐人,初始坐标为正整数1~m,有n个人,每个人希望坐的位置$\leq L_i$或者$\geq R_i$,可以添加若干个椅子在任意的实数位置,求最少要添加多少椅子使得所有人都有位 ...
- BZOJ 3881 [Coci2015]Divljak（AC自动机+树状数组）
建立AC自动机然后,加入一个串之后考虑这个串的贡献.我们把这个串扔到AC自动机里面跑.最后对经过每一个点到的这个点在fail树的根的路径上的点有1的贡献.求链的并,我们把这些点按DFS序排序,然后把每 ...
- LVM的创建与挂载
LVM的诞生: 由于传统的磁盘管理不能对磁盘进行磁盘管理,比如我把/dev/sdb1挂载到了/liu目录下,但是因为数据量过大的原因,此文件系统磁盘利用率已经高达98%,那么我可以直接对这个磁盘进行扩 ...
- ADT+NDK搭建jni编译环境
jni是android调用C++编写的库的接口.C++和java的差别不在此文的讨论范畴,另外这里也仅仅是记录下.怎样搭建好开发环境. 首先是下载ADT包和NDK包. ADT包包括了eclipse.所 ...
- C++ Primer笔记13_运算符重载_总结
总结: 1.不能重载的运算符: . 和 .* 和 ?: 和 :: 和 sizeof 和 typeid 2.重载运算符有两种基本选择: 类的成员函数或者友元函数, 建议规则例如以下: 运算符 建议使用 ...
- a+=b 等价于 a=a+b ?
a += b和a = a + b全然等价么(java)?可能非常多人以为是一样的,事实上并不是等价的,以下看一下证据吧. public class Test { public static void ...
- java 基本类型、包装类、字符串之间的转换
1.基本类型和包装类 基本类型和包装类可通过自动装箱和拆箱实现. int i = 24; Integer a = new Integer(i); //手动装箱 Integer b = i; //自动装 ...
- HDU 5310 Souvenir
Souvenir Accepts: 901 Submissions: 2743 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 262 ...
- bzoj3931: [CQOI2015]网络吞吐量(spfa+网络流)
3931: [CQOI2015]网络吞吐量 题目:传送门 题解: 现在有点难受....跳了一个多钟...菜啊... 题意都把做法一起给了....最短路+网路流啊. 不想说话...记得开long lon ...
- Excel操作之VLOOKUP
https://support.office.com/en-us/article/VLOOKUP-function-0bbc8083-26fe-4963-8ab8-93a18ad188a1 Use V ...