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 ...
随机推荐
- Ubuntu下U盘文件只读的解决办法
转自linux公社:http://www.linuxidc.com/Linux/2012-12/76130.htm Ubuntu下U盘出现文件系统只读的问题了.症状为无法删除U盘中现有文件,无法向U盘 ...
- 串的两种模式匹配方式(BF/KMP算法)
前言 串,又称作字符串,它是由0个或者多个字符所组成的有限序列,串同样可以采用顺序存储和链式存储两种方式进行存储,在主串中查找定位子串问题(模式匹配)是串中最重要的操作之一,而不同的算法实现有着不同的 ...
- 031 Android 异步任务(AsyncTask)
1.介绍 AsyncTask(了解即可),重点掌握Handler+Thread 2.实现方法 3.执行步骤 4.java后台 package com.lucky.test36asynctask; im ...
- C之推栈溢出原因
https://blog.csdn.net/weixin_36194037/article/details/78871468
- STM32之外部中断
图1.0 图1.1 中断控制器支持23条中断线,其中16条是IO管脚中断线,分别是EXTI0~EXTI15: 图 1.2 另外七根中断线如下图: 中断线和管脚的对应关系:EXTI0~EXTI15 和 ...
- 关于使用 symfony 3.4.32中Luckynumber 页面的 route 书写
关于symfony 3.4.32的安装与配置及第一个页面Luckynumber 的route书写 1.symfony 的安装与配置 symfony官网文档:https://symfony.com/do ...
- python爬取盘搜的有效链接
因为盘搜搜索出来的链接有很多已经失效了,影响找数据的效率,因此想到了用爬虫来过滤出有效的链接,顺便练练手~ 这是本次爬取的目标网址http://www.pansou.com,首先先搜索个python, ...
- Python学习路线图【转载】
文章来源:https://blog.csdn.net/u014044812/article/details/88079011
- 【并发】9、借助redis 实现生产消费,消息订阅发布模式队列
这个就是一个消息可以被多次消费的范例了 其实这个实现的方式可以参考我之前的设计模式,观察者模式 https://www.cnblogs.com/cutter-point/p/5249780.html ...
- ivew数控件Tree自定义节点内容示例分析
ivew数控件Tree自定义节点内容示例分析 demo地址:https://run.iviewui.com/plcWlM4H <template> <Tree :data=" ...