jquery.lazyload（懒加载）的使用与配置
jquery lazyload是一款基于jquery框架的图片延迟加载应用，它可以让用户访问页面的时候只显示当前屏幕所示的图片。原理为利用JS替换图片src为loading图片，新data-original属性放置图片地址，scroll事件触发JS把src重新换成图片的真实地址。
一. 如何使用
threshold : 0,
failure_limit : 0,
event : “scroll”, //触发事件
effect : “show”, //显示方式
container : window, //容器
data_attribute : “original”, //属性
skip_invisible : true,
appear : null,
load : null, placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"
1. threshold：
临界值，这个值是针对container容器的，即距离container容器视口的临界值，就是用来提前加载的。
如： $(“img”).lazyload({ threshold : 200 });当距离图片还有200像素的时候，就开始加载图片。
2. event：
事件，container容器默认绑定scroll这个事件，在这个事件被触发时，会不断的判断img元素是否满足触发appear的条件， 因此当浏览器不停的滚动下来时，如果满足条件，则显示图片；
另外还有一点，如果这个事件不是scroll事件，则选中的img元素都会绑定这个事件，绑定的这个事件中同样会触发内部appear事件；
3. effect：
显示方法，默认为show，也可以设置为fadeIn，API中隐藏了一个配置属性effectspeed，动画运行的时间
4. data_attribute: "original“
img元素的一个data属性，用于存放图片的真实地址
5. skip_invisible: true
true:不加载隐藏的不可见图像，false:为加载，如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery.lazyload</title>
<style>
.cont{ width:640px; height:300px; overflow: scroll; position:relative; }
.cont img{ width:640px; }
</style>
</head>
<body> <div class="cont">
<img data-original="img/1.jpg" style="display:none" />
<img data-original="img/2.jpg" />
<img data-original="img/3.jpg" />
<img data-original="img/4.jpg" />
<img data-original="img/5.jpg" />
<img data-original="img/6.jpg" />
</div> <script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.lazyload.min.js"></script>
<script>
$(function(){
$("img").lazyload({"container":".cont","skip_invisible":false});
});
</script>
</body>
</html>
6. placeholder
图片占位符，img元素默认src属性为1*1像素的透明图片
7. appear: null
在img触发appear事件时执行的回调
8. load: null
在img触发load事件时执行的回调
9. failure_limit: 0
循环查找 img，根据 HTML 文档的布局从上往下查找,0表示当找到第一个并未显示/加载的 img 时,就会停止往下查找.
如果找到的是第 failure_limit 个img元素，且不在container视口上方，左方及视口内（可以允许在视口下方，右方），则中断循环。如：
$(“img”).lazyload({ failure_limit : 10 }); 表示插件找到 10 个不在可见区域的图片是才停止搜索。
注： float 和 position 造成图片排序换乱时，才会有作用
三.其他
1.jquery lazyload可以做延时，如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>延时加载-jquery.lazyload</title>
<style>
.cont{ width:640px; height:300px; overflow: scroll; position:relative; }
.cont img{ width:640px; }
</style>
</head>
<body> <div class="cont">
<img data-original="img/1.jpg" />
<img data-original="img/2.jpg" />
<img data-original="img/3.jpg" />
<img data-original="img/4.jpg" />
<img data-original="img/5.jpg" />
<img data-original="img/6.jpg" />
</div> <script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.lazyload.min.js"></script>
<script>
$(function() {
$("img").lazyload({
event : "sporty"
});
});
$(window).bind("load", function() {
var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000);
});
</script>
</body>
</html>
2.tab加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab-jquery.lazyload</title>
<style>
.nav span{ background:#ccc; display:inline-block; width:80px; height:40px; line-height:40px; text-align:center; cursor:pointer; }
.nav span.on{ background:#eee; }
.cont{ width:640px; height:300px; }
.cont-item{ width:640px; height:300px; overflow: scroll; }
.cont img{ width:640px; }
.cont .cont-item:nth-child(2){ display:none; }
</style>
</head>
<body>
<div class="nav">
<span class="on">1</span>
<span>2</span>
</div>
<div class="cont">
<div class="cont-item">
<img data-original="img/1.jpg" height="574" width="765" />
<img data-original="img/2.jpg" height="574" width="765" />
<img data-original="img/3.jpg" height="574" width="765" />
</div>
<div class="cont-item">
<img data-original="img/4.jpg" height="574" width="765" />
<img data-original="img/5.jpg" height="574" width="765" />
<img data-original="img/6.jpg" height="574" width="765" />
</div>
</div> <script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.lazyload.min.js"></script>
<script>
$(function(){
$(".cont-item").eq(0).find("img").lazyload({"container":".cont-item"});
$(".nav span").click(function(){
var t = $(this);
var inx = t.index();
if(t.hasClass("on")){
return;
}else{
t.addClass("on").siblings("span").removeClass("on");
$(".cont-item").eq(inx).show().siblings(".cont-item").hide();
$(".cont-item").eq(inx).find("img").lazyload({"container":".cont-item"});
}
});
});
</script>
</body>
</html>
jquery.lazyload（懒加载）的使用与配置的更多相关文章
- jQuery lazyload 懒加载
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明
jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...
- jquery 图片懒加载
jquery 图片懒加载 CreationTime--2018年7月1日14点45分 Author:Marydon 1.源码展示 (function(a){a.fn.lazyload=functi ...
- 在ThinkPHP框架（5.0.24）下引入Ueditor并实现向七牛云对象存储上传图片同时将图片信息保存到MySQL数据库，同时实现lazyload懒加载
这是我花了很多天的时间才得以真正实现的一组需求. 文章后面有完整Demo的GitHub链接. 一. 需求描述 1. 应用是基于ThinkPHP5开发的: 2. 服务器环境是LNMP,PHP版本是7.2 ...
- jquery图片懒加载效果
1.要引入jquery 2.要引入underscore.js <!DOCTYPE html> <html lang="en"> <head> & ...
- lazyload懒加载的使用
1.引用<script src="http://a.tbcdn.cn/apps/baron/js/??lib/tmm/tmm.js,lib/lazyload/lazyload.js?2 ...
- react 使用 lazyload 懒加载图片
文档地址 index.html <script> (function(w, d) { var b = d.getElementsByTagName("body")[0] ...
- 如何在小程序实现图片lazy-load懒加载效果
自从跳一跳出现之后小程序又开始频繁出现了,在学习过程中发现小程序虽然好但是由于api不完善导致开发过程中有很多的坑,重点是网上相对小程序出现坑时解决方案显然比较少,小程序最让人觉得痛心疾首之一就是无法 ...
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js
引入:<script type="text/javascript" src="${base}/resources/shop/js/jquery.lazyload.j ...
随机推荐
- kill 掉 占据端口的进程
netstat -anp | grep 80kill -9 进程号
- Cookies和Sessions
Cookie和Session 为什么会有cookie和session? 由于http协议是无状态的 无法记住用户是谁,cookie主要是在浏览器上记录客户的状态,session主要是用来在服务端记录客 ...
- pytorch1.0实现AutoEncoder
AutoEncoder (自编码器-非监督学习)神经网络也能进行非监督学习, 只需要训练数据, 不需要标签数据. 自编码就是这样一种形式.自编码能自动分类数据, 而且也能嵌套在半监督学习的上面, 用少 ...
- 树莓派上跑.NET的segment fault错误
答案:树莓派1和树莓派zero是不支持的,原因是.net需要arm v7 详情看这里 可以用 cat /proc/cpuinfo | grep 'model name' |uniq 看一下cpu
- Spyder中报错： Check failed: PyBfloat16_Type.tp_base != nullptr
报错问题: 问题1:tensorflow/python/lib/core/bfloat16.cc:675] Check failed: PyBfloat16_Type.tp_base != nullp ...
- 机器学习支持向量机SVM笔记
SVM简述: SVM是一个线性二类分类器,当然通过选取特定的核函数也可也建立一个非线性支持向量机.SVM也可以做一些回归任务,但是它预测的时效性不是太长,他通过训练只能预测比较近的数据变化,至于再往后 ...
- RAP2 前后端开发利器搭建
RAP2 是一个api管理系统,前后端协作开发的利器. 在线体验地址http://rap2.taobao.org Web接口管理工具,开源免费,接口自动化,MOCK数据自动生成,自动化测试,企业级管理 ...
- java 线程并发（生产者、消费者模式）
线程并发协作(生产者/消费者模式) 多线程环境下,我们经常需要多个线程的并发和协作.这个时候,就需要了解一个重要的多线程并发协作模型“生产者/消费者模式”. Ø 什么是生产者? 生产者指的是负责生产数 ...
- SVN_05用戶管控
安全性设置 [1]在左侧的User上点击右键 输入上面的信息,点击OK,我们就创建一个用户了. 说明:注意到了下面图中的Groups,是的,也可以先创建组,把用户添加到各个组中,然后对组进行授权,操作 ...
- pymysql操作mysql数据库
1.建库 import pymysql # 建库 try: conn=pymysql.connect( host='127.0.0.1', port=3306, user='root', passwd ...