Lazy Load 延迟加载图片的jQuery插件中文使用文档_jquery

合集下载

JS实现图片懒加载（lazyload）过程详解

JS实现图⽚懒加载（lazyload）过程详解对于图⽚较多的页⾯，使⽤懒加载可以⼤幅提⾼页⾯加载速度，提⾼⽤户体验。

懒加载的意义（为什么要使⽤懒加载）对页⾯加载速度影响最⼤的就是图⽚，⼀张普通的图⽚可以达到⼏M的⼤⼩，⽽代码也许就只有⼏⼗KB。

当页⾯图⽚很多时，页⾯的加载速度缓慢，⼏S钟内页⾯没有加载完成，也许会失去很多的⽤户。

所以，对于图⽚过多的页⾯，为了加速页⾯加载速度，所以很多时候我们需要将页⾯内未出现在可视区域内的图⽚先不做加载，等到滚动到可视区域后再去加载。

这样⼦对于页⾯加载性能上会有很⼤的提升，也提⾼了⽤户体验。

原理将页⾯中的img标签src指向⼀张⼩图⽚或者src为空，然后定义data-src（这个属性可以⾃定义命名，我才⽤data-src）属性指向真实的图⽚。

src指向⼀张默认的图⽚，否则当src为空时也会向服务器发送⼀次请求。

可以指向loading的地址。

注：图⽚要指定宽⾼<img src="default.jpg" data-src="/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" />当载⼊页⾯时，先把可视区域内的img标签的data-src属性值负给src，然后监听滚动事件，把⽤户即将看到的图⽚加载。

这样便实现了懒加载。

代码<head><meta charset="UTF-8"><title>Document</title><style>img {display: block;margin-bottom: 50px;width: 400px;height: 400px;}</style></head><body><img src="default.jpg" data-src="/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""><img src="default.jpg" data-src="/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""><img src="default.jpg" data-src="/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt=""><img src="default.jpg" data-src="/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt=""><img src="default.jpg" data-src="/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""><img src="default.jpg" data-src="/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""><img src="default.jpg" data-src="/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""><img src="default.jpg" data-src="/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""><img src="default.jpg" data-src="/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt=""><img src="default.jpg" data-src="/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""><img src="default.jpg" data-src="/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""></body>JavaScript<script>var num = document.getElementsByTagName('img').length;var img = document.getElementsByTagName("img");var n = 0; //存储图⽚加载到的位置，避免每次都从第⼀张图⽚开始遍历lazyload(); //页⾯载⼊完毕加载可是区域内的图⽚window.onscroll = lazyload;function lazyload() { //监听页⾯滚动事件var seeHeight = document.documentElement.clientHeight; //可见区域⾼度var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部⾼度for (var i = n; i < num; i++) {if (img[i].offsetTop < seeHeight + scrollTop) {if (img[i].getAttribute("src") == "default.jpg") {img[i].src = img[i].getAttribute("data-src");}n = i + 1;}}}</script>jQuery<script>var n = 0,imgNum = $("img").length,img = $('img');lazyload();$(window).scroll(lazyload);function lazyload(event) {for (var i = n; i < imgNum; i++) {if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {if (img.eq(i).attr("src") == "default.jpg") {var src = img.eq(i).attr("data-src");img.eq(i).attr("src", src);n = i + 1;}}}}</script>使⽤节流函数进⾏性能优化如果直接将函数绑定在scroll事件上，当页⾯滚动时，函数会被⾼频触发，这⾮常影响浏览器的性能。

javascript实现图片延迟加载方法汇总（三种方法）

javascript实现图⽚延迟加载⽅法汇总（三种⽅法）看到⼀些⼤型⽹站，页⾯如果有很多图⽚的时候，当你滚动到相应的⾏时，当前⾏的图⽚才即时加载的，这样⼦的话页⾯在打开只加可视区域的图⽚，⽽其它隐藏的图⽚则不加载，⼀定程序上加快了页⾯加载的速度，对于⽐较长的页⾯来说，这个⽅案是⽐较好的。

原理是这样：页⾯可见区域以下的图⽚先不加载，等到⽤户向下滚动到图⽚位置时，再进⾏加载。

这样做的好处在哪⾥？——当页⾯有好⼏屏内容时，有可能⽤户只看前⼏屏的内容，这样我们就可以只加载⽤户需要看的图⽚，减少服务器向⽤户浏览器发送图⽚⽂件所产⽣的负荷，下⾯通过三种⽅法给⼤家介绍js实现图⽚延时加载。

js实现图⽚延迟加载⽅法⼀：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>lazyImage2.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"></head><body style="text-align:center" mce_style="text-align:center"><p>  </p><p> </p><p> </p><p> </p><p> </p><div style="height:1290px;width:800px;border:1px;background:gray;"></div><div style="height:150px;width:800px;border:1px;background:green;"></div><img class="lazy" src="images/sprite.gif" mce_src="images/sprite.gif" alt="images/lazyloadImg.jpg" /><script type="text/javascript"><!--var temp = -1;//⽤来判断是否是向下滚动（向上滚动就不需要判断延迟加载图⽚了）window.onscroll = function() {var imgElements = document.getElementsByTagName("img");var lazyImgArr = new Array();var j = 0;for(var i=0; i<imgElements.length; i++) {if(imgElements[i].className == "lazy"){lazyImgArr[j++] = imgElements[i];}}var scrollHeight = document.body.scrollTop;//滚动的⾼度var bodyHeight = document.body.offsetHeight;//body（页⾯）可见区域的总⾼度if(temp < scrollHeight) {//为true表⽰是向下滚动，否则是向上滚动，不需要执⾏动作。

divcss网页图片延迟加载的方法

divcss网页图片延迟加载的方法
我们常常会见到很多网页的图片并不是一打开页面就全部加载的，而是浏览到当前的图片位置才显示出来。

这是怎幺实现出来的呢？大家知道divcss网页图片延迟加载吗?我们积累了一些经验，在此拿出来与大家分享下。

第一步：下载jQuery的程序包，我在网页下面已经提供修改过的，绝对的可用。

适应各个版本的浏览器，还有手机浏览器
第二步，将下载的文件解压放到一个js目录里面
/js/lazyload/grey.gif
/js/lazyload/jquery.js
/js/lazyload/zyload.js
然后在需要用到特效的模板页面中，加上以下调用代码
我的建议是放在head前的最后一行
路径地址自己更改，根据自己模板中的相应规则
第三步：修改zyload.js文件
找到.context img
这个说明下，看仔细了
其中如果去掉.context就剩下img是延迟加载所有图片，根据不同模板作相应改动，比如我这个模板，我只需要内容里的图片延迟加载，所以改
成.context
img，这样只延迟加载.context容器内的图片，否则可能影响到其他图片的加载;。

前端性能优化--图片懒加载（lazyloadimage）

前端性能优化--图⽚懒加载（lazyloadimage）话说前头：上次写了⼀篇webpack的学习⼼得，webpack能做到提升前端的性能，其模块打包最终⽣成⼀个或少量的⽂件能够减少对服务端的请求。

除此之外，本次的图⽚懒加载（当然不仅限于图⽚，还可以有视频，flash等）也是⼀种优化前端性能的⽅式。

使⽤懒加载可以想要看图⽚时才加载图⽚，⽽不是⼀次性加载所有的图⽚，从⽽在⼀定程度从减少服务端的请求。

懒加载介绍：通俗介绍：懒加载怎么个懒法，就是你不想看就不给你看，我也懒得加载出来，懒得去请求。

通俗的说就是你不要就不给你，怎么地。

举个栗⼦，⽐如在进⼊某个页⾯的时候，它会有许多的图⽚，有些图⽚可能在下⾯，当我们点进页⾯但没有滑动下去或没看完整个页⾯，那么下⾯的图⽚就会"没⽤"，加载了也⽩加载，⽽且还降低了⽹页的加载速度。

因此⽤懒加载能当滚动到可视区域时才加载当前的图⽚。

原理：图⽚的加载是由src的值引起，当对src赋值时浏览器就会请求图⽚资源，基于这个，可以利⽤html5属性data-XXX来保存图⽚的路径，当我们需要加载图⽚的时候才将data-xxx的值赋予src，酱就能实现图⽚的按需加载，也就是懒加载了。

优点：提⾼前端性能，图⽚在需要的时候才加载，减轻服务的负担，提⾼页⾯的加载速度，能够减少带宽。

懒加载实现⽅式:1.使⽤jquery-lazyload.js，jQuery的插件⽤于懒加载使⽤，需要依赖jQuery。

2.使⽤echo.js：专门⽤于实现懒加载。

-- jquery-lazyload.js 实现⽅式：1.引⼊：在HTML中引⼊jQuery和jQuery-lazyload，如：<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script><script type="text/javascript" src="js/zyload.min.js"></script>2.图⽚中不使⽤src属性，因为使⽤src属性后就会默认发送请求请求图⽚，使⽤data-original代替如：<img class="lazy" data-original="images/p1.jpg" style="margin-top:500px" height="300">3.添加jQuery代码：<script type="text/javascript">$(function() {$("zy").lazyload();})</script>-- jquery-lazyload.js的参数:1.threshold :设置Threshold参数来实现滚到距离其xx px时就加载。

抄代码｜帝国cms jquery.lazyload.js实现图片延迟懒加载极简方法

抄代码｜帝国cms zyload.js实现图片延迟懒加载极简方法如果你对网站速度优化有一定了解，或者你是用过百度统计提供的网站速度诊断工具的网站管理者，会知晓一件事：一个网站页面图片过多的话，加载时会导致网页打开变慢，甚至看得见“卡顿”的现象。

这不仅会影响用户的浏览体验，也会影响到搜索引擎对网站的优劣评判及seo。

（如上图所示，相比于js等文本类文件，三个红色标注的图片文件，就算kb更小，加载时间亦要久很多）对于较大型的、有专业程序员配置的网站运营者来说，为网站中的图片实现惰性加载(专业术语，俗称为延迟加载，懒加载)，是一件正常不过的事。

毕竟，懒加载不是什么新技术，好几年前就已经在较大的互联网站普及了。

那问题来了：什么是懒加载？答：懒加载是一种网页交互呈现效果。

通常而言，首次只加载第一屏（能看得见的）的图片，之后的图片则不加载（或只加载一个文件容量特别小的图片，称为占位图），如果用户拖动滚动条至后面某处位置（这处位置称为可视区域）则再加载图片，这样做的好处是避免网页因加载图片过多而打开慢的弊端。

两个字，提速！如果网站图片多，要提速，那懒加载就是web技术层面的标配。

提升网站页面加载速度，利于seo提升——懒加载好处看上去很多，只是要如何具体地用在自己的网站上呢？对于没有专业程序员参与的网站运营管理者来说，要实现懒加载并不是那么容易。

网上有一些教程，厉害的高手是自己写原生js来解决，更多快捷解决方案是使用zyload.js插件，有示例代码及演示（请自行搜索或参见此处链接），这个插件的使用并不难，如果是从零开始构建一个页面，直接套用是没有问题的，可是要套用在帝国cms制作好的网站里，得用什么方式方法呢？经过在学而行营销网的实践摸索，以下是帝国cms结合zyload.js 实现图片延迟懒加载的极简解决方法。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－首先，要下载zyload.js的迷你压缩版，此js文件相当小，只有2k大小。

[前端]图片预加载方法

[前端]图⽚预加载⽅法⽬录1.2.3.4.1. 使⽤jQuery图⽚预加载(延迟加载)插件Lazy LoadLazy Load也叫惰性加载，延迟加载，顾名思义，就是在图⽚未到达可视区域时，不加载图⽚，我们常常在很多的优秀⽹站上看到类似的例⼦，例如迅雷、⼟⾖、优酷等，由于⼀个⽹页的图⽚⾮常多，⼀次性加载增加服务器压⼒，⽽且⽤户未必会拉到底部，浪费⽤户流量，Lazy Load采⽤按需加载，更快的加载速度从⽽达到优化⽹页的⽬的。

使⽤⽅法:加载jQuery, 并在html代码的底部包含进来<script src="jquery.js" type="text/javascript"></script><script src="zyload.js" type="text/javascript"></script>设置图⽚的占位符为data-original, 给图⽚⼀个特别的标签, 像这样设置图⽚<img class="lazy" data-original="img/example.jpg" width="640" height="480">$(function(){$("zy").lazyload();});注意：你必须给图⽚设置⼀个height和width，或者在中定义，否则可能会影响到图⽚的显⽰。

插件选项图⽚预先加载距离：threshold，通过设置这个值，在图⽚未出现在可视区域的顶部距离这个值时加载。

默认为0，下⾯为设置threshold为200表⽰在图⽚距离可视区域还有200像素时加载。

$("zy").lazyload({threshold :200});事件绑定加载的⽅式：event，你可以使⽤jQuery的事件，例如“click”、“mouseover”，或者你也可以⾃定义事件，默认等待⽤户滚动，图⽚出现在可视区域。

JS Lazyload 延迟加载效果

left: rect.left + left - threshold,
right: rect.right + left + threshold
}
在_getScroll获取scroll值程序中，如果是document时会通过$$D来获取，详细看这里dom部分。
threshold阈值的作用是在视框范围的基础上增大加载范围，实现类似预加载的功能。
ps：更多相关信息可以看“Finding the size of the browser window”。
在_load程序中，先根据位置参数、滚动值和阈值计算_range加载范围参数：
代码
var rect = this._rect, scroll = this._getScroll(),
left = scroll.left, top = scroll.top,
this._initStatic( "cross", "vertical" );
break;
case "cross-horizontal" :
this._initStatic( "cross", "horizontal" );
break;
5，当前元素已经超过了加载范围，不用继续历遍，跳到6；
6，合并未加载的元素，并记录当前索引，等待滚动，如果全部元素都加载了，就完成退出。
7，当容器滚动时，跳到1.1；当容器大小改变时，设置强制加载，跳到1.1；当容器位置发生变化时，需要重新修正元素坐标，跳到1；
首先加载元素会在_rect属性中记录位置参数，不用重复获取，是一个优化。

jquery中load方法的用法及注意事项说明

jquery中load⽅法的⽤法及注意事项说明调⽤load⽅法的完整格式是：load( url, [data], [callback] ),其中是指要导⼊⽂件的地址。

可选参数；因为Load不仅仅可以导⼊静态的html⽂件，还可以导⼊动态脚本，例如PHP⽂件，所以要导⼊的是动态⽂件时，我们可以把要传递的参数放在这⾥。

可选参数；是指调⽤load⽅法并得到服务器响应后，再执⾏的另外⼀个函数。

1.加载⼀个php⽂件，该php⽂件不含传递参数$("#myID").load("test.php");//在id为#myID的元素⾥导⼊test.php运⾏后的结果2. 加载⼀个php⽂件，该php⽂件含有⼀个传递参数$("#myID").load("test.php",{"name" : "Adam"});//导⼊的php⽂件含有⼀个传递参数，类似于：test.php?name=Adam3. 加载⼀个php⽂件，该php⽂件含有多个传递参数。

注：参数间⽤逗号分隔$("#myID").load("test.php",{"name" : "Adam" ，"site":""});//导⼊的php⽂件含有⼀个传递参数，类似于：test.php?name=Adam&site=4. 加载⼀个php⽂件，该php⽂件以数组作为传递参数$("#myID").load("test.php",{'myinfo[]', ["Adam", ""]});//导⼊的php⽂件含有⼀个数组传递参数。

注意：使⽤load，这些参数是以POST的⽅式传递的，因此在test.php⾥，不能⽤GET来获取参数。

jquery实现异步加载图片（懒加载图片一种方式）

jquery实现异步加载图⽚（懒加载图⽚⼀种⽅式）⾸先将插件在jq后⾯引⼊(function($) {// alert($.fn.scrollLoading);$.fn.scrollLoading = function(options) {var defaults = {attr: "data-url"};var params = $.extend({}, defaults, options || {});params.cache = [];$(this).each(function() {var node = this.nodeName.toLowerCase(),url = $(this).attr(params["attr"]);if(!url) {return;}var data = {obj: $(this),tag: node,url: url};params.cache.push(data);});var loading = function() {var st = $(window).scrollTop(),sth = st + $(window).height();$.each(params.cache, function(i, data) {var o = data.obj,tag = data.tag,url = data.url;if(o) {post = o.position().top;posb = post + o.height();if((post > st && post < sth) || (posb > st && posb < sth)) {if(tag === "img") {o.attr("src", url);} else {o.load(url);}data.obj = null;}}});return false;};loading();$(window).bind("scroll", loading);};})(jQuery);然后在底部初始化$(document).ready(function () {//实现图⽚慢慢浮现出来的效果$("img").load(function () {//图⽚默认隐藏$(this).hide();//使⽤fadeIn特效$(this).fadeIn("5000");});// 异步加载图⽚，实现逐屏加载图⽚$(".scrollLoading").scrollLoading();});需要修改img标签为<img class="scrollLoading" data-url="image/logo.jpg" src="images/load.gif" />data-url表⽰将要异步加载的图⽚，src表⽰⾸先加载的图⽚（⼀般会是⼩图⽚，或者是⼀个动画，⽹页中全部的src链接同⼀个图⽚，这样⽹页就加载快好多，这个时候再异步的加载要加载的图⽚，也就现在要说的功能）以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

jquery_详细中文说明教学文档

目录部分常用方法速查 (2)选择器 (2)表单选择器 (4)属性 (5)节点匹配 (6)文本处理 (12)Css (13)事件 (15)动画效果 (18)Ajax (20)其他 (24)Ajax (24)1. load( url, [data], [callback] ) (24)2. jQuery.get( url, [data], [callback] ) (25)3. jQuery.post( url, [data], [callback], [type] ) (26)4. jQuery.getScript( url, [callback] ) (27)5. jQuery Ajax 事件 (27)6. jQuery.ajax( options ) (29)7. jQuery.ajaxSetup( options ) (31)8. serialize() 与serializeArray() (31)1部分常用方法速查$()如果()内是css选择器：找到相应的节点包装成JQuery对象DOM对象：直接包装成JQuery对象一段HTML代码：先创建DOM对象，再包装成JQuery对象$("<div></div>").appendTo($(obj))返回jQuery$(#id)根据给定的ID匹配一个元素。

返回jQuery$(element)根据给定的元素名匹配所有元素返回Array<Element(s)>$(.class)根据给定的类匹配元素。

返回Array<Element(s)>$(*)匹配所有元素返回Array<Element(s)>$(selector1,selector2,selectorN)将每一个选择器匹配到的元素合并后一起返回。

返回Array<Element(s)>选择器parent > child取得<div>下的所有<span>子节点$("div > span")返回Array<Element(s)>:first选取所有<div>元素中第一个<div>元素$("div:first")返回jQuery:last选取所有<div>元素中最后一个<div>元素$("div:last")返回jQuery:not(Selector)选取所有class不是mytest的<div>元素$("div:not(.mytest)")返回Array<Element(s)>:even查找表格的偶数行，从0开始计数$("tr:even")返回Array<Element(s)>:odd查找表格的奇数行，从0开始计数$("tr:odd")返回Array<Element(s)>:eq(index)匹配一个给定索引值的元素，从0开始计数$("tr:eq(1)")返回Array<Element(s)>:gt(index)匹配所有大于给定索引值的元素，从0开始计数$("tr:gt(0)")返回Array<Element(s)>:lt(index)匹配所有小于给定索引值的元素，从0开始计数$("tr:lt(2)")返回Array<Element(s)>:animated选取当前正在执行动画的所有元素$(":animated")返回Array<Element(s)>:contains(string)选取所有文本内容包含“关键词”的<div>元素$("div:contains('关键词')")返回Array<Element(s)>:has查找所有含有<p>子元素的<div>父元素$("div:has(p)")返回Array<Element(s)>:empty选取所有空<div></div>的元素$("div:empty")返回Array<Element(s)>:visible查找所有可见元素$("tr:visible")返回Array<Element(s)>[attribute = value]选取文本输入框的input元素$("input[type=text]")返回Array<Element(s)>[attribute != value]选取所有不是hidden的input元素，注意，没有type属性的input也会被选取$("input[type!=hidden]")返回Array<Element(s)>[attribute ^= value]选取开头为mailto:的所有a链接$("a[href^='mailto']")返回Array<Element(s)>[attribute $= value]选取所有结尾为.jpg的img图片$("img[src$='.jpg']")返回Array<Element(s)>表单选择器:input查找所有的input元素（包括input, textarea, select和button）$(":input")返回Array<Element(s)>:password查找所有密码框$(":password")返回Array<Element(s)>:text查找所有单行文本框$(":text")返回Array<Element(s)>:radio查找所有单选按钮$(":radio")返回Array<Element(s)>:checkbox查找所有复选框$(":checkbox")返回Array<Element(s)>:checked查找所有选中的checkbox, radio$("input:checked")返回Array<Element(s)>:selected查找所有选中的选项元素$("select:selected")返回Array<Element(s)>属性attr(key) attr(key,value)设置一个属性的值HTML:<img src="test.jpg"/>jQuery:$("img").attr("src");Result:test.jpg返回jQueryremoveAttr(key)删除一个属性HTML:<img src="test.jpg"/>jQuery:$("img").removeAttr("src");Result:[<img /> ]返回jQueryaddClass(class)追加指定的类名HTML:<p>Hello</p>jQuery:$("p").addClass("selected highlight");Result:[ <p class="selected highlight">Hello</p> ] 如果要替换样式，用attr() 返回jQueryremoveClass()移除样式Html:<p class="red">你最喜欢的是？</p>JQuery:$("p").removeClass("red");Result:<p >你最喜欢的是？</p>可以同时移除多个样式：$("p").removeClass("red bold");或者全部移除样式：$("p").removeClass();返回jQuerytoggleClass()如果节点存在该样式，则移除，不存在，则追加$("p").toggleClass("blue");返回jQueryhasClass(class)判断节点是否存在该样式，返回布尔值$("p").hasClass("blue"); 该方法等价于：$("p").is(".blue"); 返回jQueryhtml()取得或设置文本内容类似innerHTML()仅可用于html文档返回String/jQuerytext()取得或设置文本内容类似innerText()可以用于html和xml文档返回String/jQueryval()取得或设置input文本框的值Html：<input type="text" id="searchbox" value="搜索的内容…" /> JQuery:$("searchbox").focus(function(){if(this.val()=="搜索的内容…"){this.val("")}});$("searchbox").blur(function(){if(this.val()==""){this.val(this.defaultValue)}});this.defaultValue 表示input文本框的默认value通过val()还能做到将表单多选框,checkbox,radio事先选中：$(":checkbox").val(["check2","check3"]);$(":radio").val(["radio2"]);返回String/Array节点匹配each(callback)为每一个匹配的元素执行一个函数迭代两个图像，并设置它们的src 属性注意此处this 指代的是DOM 对象而非jQuery 对象HTML:<img/><img/>jQuery:$("img").each(function(i){this.src = "test" + i + ".jpg";});Result:[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]返回jQuerysize()/length获取对象中元素的个数$("img").size();$("img").length;返回Numberindex([subject])匹配的元素，并返回相应元素的索引值，从0开始计数HTML:<ul><li id="foo">foo</li><li id="bar">bar</li><li id="baz">baz</li></ul>jQuery:$('li').index($('#bar')); //1$('li').index($('li:gt(0)')); //1$('#bar').index('li'); //1$('#bar').index(); //1返回Numberget()/get(index)get():以数组形式取得所有匹配的节点集合get(index) :index存在则从中选择某一个DOM节点HTML:<img src="test1.jpg"/><img src="test2.jpg"/>jQuery:$("img").get(0);Reslut:[ <img src="test1.jpg"/> ]返回Array<Element>/ Elementeq(index)以对象形式获取第index个元素，位置从0算起获取匹配的第二个元素HTML:<p> This is just a test.</p><p> So is this</p>jQuery:$("p").eq(1)Result:[ <p> So is this</p> ]补充 .get(index)和.eq(index)的区别.get(index)返回的是一个html数组.eq(index)返回的是一个Jquery对象$("ul li").get(1).css("color", "red");//这个是错误的$("ul li").eq(1).css("color", "red");//这个是正确的同理将JQuery对象转换为DOM对象可以使用get alert一个非JQuery对象，如：var $cr = $("#cr");var cr = $cr.get(0);alert(cr.checked);返回jQueryfirst()获取匹配的第一个元素$('li').first() 等价于$('li:first')返回jQuerylast()获取匹配的最后一个元素$('li').last() 等价于$('li:last')返回jQueryfilter(fn)筛选出与指定函数返回值匹配的元素集合保留子元素中不含有ol的元素。

jQuery之jquery.lazyload.js插件用法

jQuery之zyload.js插件⽤法研究背景：⽹站中如果图⽚过多，就会因为加载图⽚⽽等待很长时间，此时我们就⽤到图⽚延时加载插件zyload.js，这个插件可以让我们在向下滚动的时候加载图⽚。

让⽹页⾸屏尽可能快的加载进来。

如何使⽤zyload.js：1、zyload.js依赖于 jquery. 请将下列代码加⼊HTML的结尾，也就是</body>前:2、你必须改变图⽚的标签。

图像的地址必须放在data-original属性上。

给懒加载图像⼀个特定的class（例如:lazy）。

这样你可以很容易地进⾏图像插件捆绑。

代码如下：提⽰：这⾥必须设置图⽚的width和height,否则插件可能⽆法正常⼯作。

这样就成功调⽤了，下⾯我们可以设置⼏个配置参数：1、设置加载临界点默认情况下图⽚会出现在屏幕时加载. 如果你想提前加载图⽚, 可以设置threshold 选项, 设置 threshold 为 200 令图⽚在距离屏幕 200 像素时提前加载.2、设置触发加载事件你可以使⽤jquery事件，例如click和mouseover。

也可以使⽤⾃定义事件，如sporty、foobar默认情况下是要等到⽤户向下滚动并且图像出现在视⼝中时。

只有当⽤户点击它们才加载图⽚：3、使⽤延时加载特效默认情况下，插件等待图像完全加载并调⽤show()。

你可以使⽤任何你想要的效果。

下⾯的代码使⽤fadeIn （淡⼊效果）。

4、针对不启⽤JavaScript的情况⼏乎所有浏览器的 JavaScript 都是激活的. 然⽽可能你仍希望能在不⽀持 JavaScript 的客户端展⽰真实图⽚. 当浏览器不⽀持 JavaScript 时优雅降级, 你可以将真实的图⽚⽚段在写 <noscript> 标签内.可以通过 CSS 隐藏占位符.在⽀持 JavaScript 的浏览器中, 你必须在 DOM ready 时将占位符显⽰出来, 这可以在插件初始化的同时完成.5、图⽚在容器⾥⾯你可以将插件⽤在可滚动容器的图⽚上, 例如带滚动条的 DIV 元素. 你要做的只是将容器定义为 jQuery 对象并作为参数传到初始化⽅法⾥⾯.6、当图像不连续时设置不在可见区域内的图⽚数滚动页⾯的时候,，zyload.js会循环为加载的图⽚. 在循环中检测图⽚是否在可视区域内.。

前端开发技术之图片懒加载插件推荐

前端开发技术之图片懒加载插件推荐近年来，随着互联网和移动设备的普及，网页加载速度成为了一个非常重要的因素。

尤其是在移动端，由于网络速度和设备性能等因素的限制，网页加载速度更加受到关注。

为了提高网页加载速度，前端开发人员常常会使用图片懒加载技术。

图片懒加载并不是什么新鲜的技术，它早在几年前就已经被广泛应用。

它的原理非常简单，当网页滚动到某个位置时，再去加载图片，而不是一开始就把所有的图片都加载出来。

这样可以有效减少网页的加载时间，提高用户的体验。

在前端开发中，有很多图片懒加载的插件可供选择。

下面我将向大家推荐几款常见且优秀的图片懒加载插件。

1. LazyLoad.jsLazyLoad.js 是一款小巧且易于使用的图片懒加载插件。

它可以自动延迟加载页面上的图片，只有当图片进入浏览器的可视区域内时才被加载。

LazyLoad.js 具有很好的兼容性，可以在各种浏览器和设备上正常工作。

2. Echo.jsEcho.js 是另一款轻量级的图片懒加载插件。

它支持延迟加载图片和背景图片，并且可以根据设备的像素密度选择加载不同大小的图片，以提高显示效果。

Echo.js 还支持自定义选择器，可以根据元素的 class 或 data 属性选择要延迟加载的图片。

3. Unveil.jsUnveil.js 是一个简单而有效的图片懒加载插件。

它只有不到1KB 的大小，非常轻量级。

Unveil.js 可以实现无缝集成，只需添加一个 data 属性即可延迟加载图片。

它还支持使用自定义选择器和回调函数，以满足更多的需求。

4. lazySizeslazySizes 是一款功能强大的响应式图片懒加载插件。

它支持自定义选择器、延迟加载和多种效果，如淡入淡出和渐进加载。

lazySizes 还提供了一些额外的功能，比如支持 WebP 图片格式、自动更新页面上的图片等。

5. Lozad.jsLozad.js 是一款现代化的图片懒加载插件。

它采用了 Intersection Observer API来实现图片的延迟加载，比传统的滚动监听方式更加高效和可靠。

图片懒加载原理及实现

图⽚懒加载原理及实现由于过多的图⽚会严重影响⽹页的加载速度，并且移动⽹络下的流量消耗巨⼤，所以说延迟加载⼏乎是标配了。

图⽚懒加载的原理很简单，就是我们先设置图⽚的data-set属性（当然也可以是其他任意的，只要不会发送http请求就⾏了，作⽤就是为了存取值）值为其图⽚路径，由于不是src，所以不会发送http请求。

然后我们计算出页⾯scrollTop的⾼度和浏览器的⾼度之和，如果图⽚举例页⾯顶端的坐标Y（相对于整个页⾯，⽽不是浏览器窗⼝）⼩于前两者之和，就说明图⽚就要显⽰出来了（合适的时机，当然也可以是其他情况），这时候我们再将 data-set 属性替换为 src 属性即可。

图⽚延迟加载的使⽤场景? 往往对于⾸页来说，图⽚较多者（并且固定了宽⾼、这样可以防⽌页⾯抖动、⽐如微博做的就⾮常不好，页⾯变化的厉害，得完！），我们都需要进⾏图⽚延迟加载的设定。

固定宽⾼的延迟加载这个实现起来⽐较简单，设置好固定宽⾼，那么使⽤上⾯所说的最简单的延迟加载即可。

淘宝就是这么做的，当滚动到视窗可见的区域，就开始加载图⽚，否则不加载图⽚。

⾮固定宽⾼的延迟加载第⼀种⽅法是：使⽤padding-top或者padding-bottom来实现固定宽⾼⽐。

/entry/22712 这种⽅法的优点是纯css⽅案，缺点是html冗余，对输出到第三⽅不友好。

<div style="padding-top:75%"><img data-src="" alt=""class="lazyload"><div> 第⼆种⽅案是在页⾯初始化阶段利⽤ratio设置实际宽⾼值，优点是html⼲净，对输出到第三⽅友好，缺点是依赖js，理论上⾄少会抖动⼀次。

<img data-src="" alt=""class="lazyload" data-ratio="0.75">进⼀步结合 srcset除了上⾯说的延迟加载，我们可以更进⼀步的引⼊srcset，通过设置srcset来保证加载最匹配的图⽚，这样对于⼀倍屏，⼆倍屏，三倍屏来说，可以做到不浪费流量且效果最好。

jquery lazyload延迟加载的实现原理分析

jquery lazyload延迟加载的实现原理分析前言懒加载技术(简称lazyload)并不是新技术，它是js程序员对网页性能优化的一种方案。

lazyload的核心是按需加载。

在大型网站中都有lazyload的身影，例如谷歌的图片搜索页，迅雷首页，淘宝网，QQ空间等。

因此掌握lazyload技术是个不错的选择，可惜jquery插件lazyload官网(.appelsiini./projects/lazyload)称不支持新版浏览器。

lazyload在什么场合中应用比较合适?涉及到图片，falsh资源，iframe，网页器(类似FCK)等占用较大带宽，且这些模块暂且不在浏览器可视区内，因此可以使用lazyload在适当的时候加载该类资源。

避免网页打开时加载过多资源，让用户等待太久。

如何实现lazyload?lazyload的难点在如何在适当的时候加载用户需要的资源(这里用户需要的资源指该资源呈现在浏览器可视区域)。

因此我们需要知道几点信息来确定目标是否已呈现在客户区,其中包括：可视区域相对于浏览器顶端位置；待加载资源相对于浏览器顶端位置。

在得到以上两点数据后，通过如下函数，便可得出某对象是否在浏览器可视区域了。

返回浏览器的可视区域位置复制代码代码如下://返回浏览器的可视区域位置functiongetClient(){varl,t,w,h;l=document.documentElement.scrollLeft||document.body.scroll Left;t=document.documentElement.scrollTop||document.body.scrollT op;w=document.documentElement.clientWidth;h=document.documentElement.clientHeight;return{left:l,top:t,width:w,height:h};}返回待加载资源位置复制代码代码如下://返回待加载资源位置functiongetSubClient(p){varl=0,t=0,w,h;w=p.offsetWidth;h=p.offsetHeight;while(p.offsetParent){l+=p.offsetLeft;t+=p.offsetTop;p=p.offsetParent;}return{left:l,top:t,width:w,height:h};}其中函数getClient()返回浏览器客户区区域信息，getSubClient()返回目标模块区域信息。

Jquery图片延迟加载插件jquery.lazyload.js的使用方法

Jquery图⽚延迟加载插件zyload.js的使⽤⽅法最新版的zyload.js已不再是伪的延迟加载了⼀、请按照基本使⽤⽅法说明设置复制代码代码如下://载⼊JavaScript ⽂件<script src="jquery.js" type="text/javascript"></script><script src="zyload.js" type="text/javascript"></script>复制代码代码如下://img标签的4个属性⼀个都不能少，否则不能实现延迟加载的效果，如下：<img class="lazy" data-original="img/example.jpg" width="640" height="480">复制代码代码如下://使⽤$(function() {$("zy").lazyload();});⼆、常⽤属性说明复制代码代码如下:threshold : 200 //设置灵敏度，表⽰进⼊显⽰区域还有200像素就开始加载effect : "fadeIn" //使⽤淡⼊特效failure_limit : 10 //容差范围，⼀定要设置此值，原因说明请参考原⽂档container: $("#container") //使⽤⽗容器，⽗容器的CSS样式⾄少应包含"height: 600px;overflow: scroll;"两个属性event : "click" //修改触发事件为单击三、参考。

Lazy Load 延迟加载图片的jQuery插件中文使用文档_jquery

什么是LazyLoad技术？在页面上图片比较多的时候，打开一张页面必然引起与服务器大数据量的交互。

尤其是对于高清晰的图片，占了几百K的空间。

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的。

在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担，这样势必会引起速度上质的提升。

兼容：ie6/7/8, firefox 3.5.5, opera 10.10, safari 4.0.4, chrome 3.0其中safari和chrome部分功能不支持。

Lazy Load 灵感来自 Matt Mlinac 制作的 YUI ImageLoader 工具箱. 这是演示页面。

原文的链接在:/projects/lazyload现在Lazy Load的版本已经是1.8.1下载地址: /jiaoben/63757.html实例下载:下载声明：1. 注：此代码仅供学习交流，请勿用于商业用途。

2. 注：此代码仅供学习交流，请勿用于商业用途。

文件信息：文件名： Lazy Load延迟加载图片实例文件Hash：dd3e435124e377c2da33344d442f85d1文件大小：1.1 MB文件上传日期：2012 年 3 月 25 日文件更新日期：2012 年 3 月 25 日文件描述：在页面上图片比较多的时候，打开一张页面必然引起与服务器大数据量的交互。

尤其是对于高清晰的图片，占了几百K的空间。

Lazy Load 是一个用JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的。

vue-lazyload使用总结（推荐）

vue-lazyload使⽤总结（推荐）当你⽤vue开发的时候，不可避免的就会遇到图⽚懒加载的问题，之前jquery时代有zyload.js，但是那个肯定不能⽤在vue的项⽬⾥。

查阅资料后发现Vue-Lazyload这个插件⽤的频率还是⽐较⾼，最近刚好也在研究vue的懒加载，顺便也仔细研究了以下这个插件，这个插件确实能够实现懒加载，但是坑也有不少，今天就⼀起来看看Vue-Lazyload。

Vue-Lazyload的github地址主要功能&实现思路这篇⽂章不是去讲解这个插件是如何配置的，这个在它的github上都有介绍，因此你要先⼤致了解它是如何配置的。

这⾥主要从源码⾓度去分析该如何正确使⽤这款插件。

v-lazy这个是Vue-Lazyload最常⽤的⼀个东西，⽤法也⾮常的简单：<ul><li v-for="img in list"><img v-lazy="img.src" ></li></ul>我们现在来看看它的内部是如何实现的，⾸先我们进⼊它github上的源码可以发现它的定义：Vue.directive('lazy', {bind: lazy.add.bind(lazy),update: lazy.update.bind(lazy),componentUpdated: zyLoadHandler.bind(lazy),unbind: lazy.remove.bind(lazy)})Vue.directive('lazy-container', {bind: lazyContainer.bind.bind(lazyContainer),update: lazyContainer.update.bind(lazyContainer),unbind: lazyContainer.unbind.bind(lazyContainer)})我们可以发现它是利⽤vue的⾃定义指令实现的，vue的⾃定义指令可以⾃定义v-***之类的指令，例如你定义了Vue.directive('demo',..)那么你就可以使⽤v-demo这样的指令，当你使⽤了之后就会有对应事件供你回调，例如bind,insert,unbind等，具体可以看看下⾯的demo：进⼊demo后我们可以看到⼀进去就出发了bind和insert事件，然后你在输⼊框输⼊内容就会触发update和updateComponent 事件，当你点击隐藏就会触发unbind事件，当你点击显⽰则⼜会触发bind和insert事件。

前端开发中的图片懒加载技巧

前端开发中的图片懒加载技巧在如今互联网高速发展的时代，网页设计及开发已经成为一项至关重要的技能。

而在众多的前端技术中，图片懒加载技巧无疑是提升网页性能和用户体验的重要一环。

本文将介绍一些前端开发中的图片懒加载技巧，帮助开发人员优化网页加载速度和降低流量消耗。

一、什么是图片懒加载？图片懒加载，又称为延迟加载，是一种通过延迟加载图像资源的技术。

在传统的网页中，所有的图片资源都会在页面加载时一次性请求并加载，这样会导致页面加载速度变慢，尤其是在移动网络环境下。

而图片懒加载技巧则是通过在用户滚动到某个位置时再请求加载图片资源，避免了一次性加载所有图片，从而提高了网页性能。

二、如何实现图片懒加载？1. 使用JavaScript实现：利用JavaScript判断图片是否进入可视区域，如果进入可视区域则动态加载图片资源。

其中，可以通过监听浏览器的滚动事件来实现。

2. 使用CSS实现：通过设置CSS属性将图片的src属性设为图片占位符，然后通过具体的样式设置将真实的图片资源引入。

三、技巧和注意事项1. 图片占位符的选择：图片占位符应该尽量和实际图片的宽高比相同，以避免页面布局上的变形。

常见的图片占位符有纯色占位符和模糊占位符，根据具体的设计需求和网页主题选择适合的占位符。

2. 按需加载：只有当图片进入可视区域时才进行加载，可以大幅度降低流量消耗，并提高网页加载速度。

可以设置一个阈值，当图片距离可视区域一定距离时开始加载。

3. 预加载关键图片：对于一些关键的图片资源，可以在页面加载时进行预加载，以保证用户在实际需要时能够快速加载显示。

4. 图片加载失败处理：在使用图片懒加载技巧时，由于网络问题或其他原因，可能会出现无法加载图片的情况。

这时可以通过在img标签中设置默认的加载失败图片，或者添加事件监听，在加载失败时进行处理。

5. 用户体验的平衡：尽管图片懒加载技巧可以提高网页性能，但过分追求加载速度和节省流量也会影响用户体验。

angular 中使用me-lazyload示例

《深入探讨Angular中使用me-lazyload的示例》在这篇文章中，我将深入探讨在Angular中使用me-lazyload的示例。

me-lazyload是一个用于延迟加载图片的Angular模块，它可以帮助优化页面加载性能，尤其是在处理大量图片的网页应用中。

通过使用me-lazyload，我们可以实现按需加载图片，从而提高网页加载速度并节省带宽。

1. 什么是me-lazyload让我们来了解一下me-lazyload是什么。

me-lazyload是一个Angular模块，它可以延迟加载页面上的图片。

在网页加载时，它会先加载可视区域内的图片，而待用户滚动页面时，它会根据需要再加载其他区域内的图片。

这样可以有效减少页面加载时间，提升用户体验。

2. 在Angular中使用me-lazyload那么，在Angular中该如何使用me-lazyload呢？我们需要在项目中安装me-lazyload模块，并将其引入到我们的Angular应用中。

接下来，我们可以在需要延迟加载的图片上使用me-lazyload指令，并指定图片的路径。

当用户滚动页面时，me-lazyload会自动加载这些图片，从而实现延迟加载的效果。

3. 示例代码下面是一个使用me-lazyload的示例代码：```html<imgme-lazyload[defaultImage]="'/assets/placeholder.png'"[errorImage]="'/assets/error.png'"[offset]="100"[useSrc]="false"[backgroundImage]="'/assets/real-image.png'"[scrollTarget]="'#scrollable-content'"/>```在这段代码中，我们使用了me-lazyload指令，并指定了一些参数，比如默认图片、错误图片、偏移量等。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

什么是LazyLoad技术？在页面上图片比较多的时候，打开一张页面必然引起与服务器大数据量的交互。

尤其是对于高清晰的图片，占了几百K的空间。

兼容：ie6/7/8, firefox 3.5.5, opera 10.10, safari 4.0.4, chrome 3.0其中safari和chrome部分功能不支持。

Lazy Load 灵感来自 Matt Mlinac 制作的 YUI ImageLoader 工具箱. 这是演示页面。

2. 注：此代码仅供学习交流，请勿用于商业用途。

尤其是对于高清晰的图片，占了几百K的空间。

Lazy Load 是一个用JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的。

怎样使用? 下面进入正题.Lazy Load 依赖于 jQuery. 请将下列代码加入页面head 区域:复制代码代码如下:<script src="jquery.js" type="text/javascript"></script><script src="zyload.js" type="text/javascript"></script>Lazy Load的使用方法十分简单,但新版做了一些调整,必须修改<img>标签的属性。

把<img>标签中的 src 属性改为等待图片的URL, data-original 属性填上真正的图片URL.如下:复制代码代码如下:<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">建议:src中的等待图片,最好使用1像素的单色图片。

JS代码如下:复制代码代码如下:$("zy").lazyload();这样就能实现Lazy Load的效果了. Demo看完Demo后,是不是觉得没什么效果出现?这个问题会在后面提到.其实,并非一定要使用它规定的 data-original 属性来存放图片URL.你也可以自己定制别的属性名,如下:<img class="lazy" src="img/grey.gif" data-attr="img/example.jpg" width="640" heigh="480">JS代码如下:复制代码代码如下:$("zy").lazyload({ data_attribute : "attr" });只需设置 data_attribute 属性为对应的名称即可. (注意:html代码大小写不敏感!所以 "data-" 后面只能跟小写字母或数字.)对于不支持JavaScript的浏览器,应该有相应的降级处理.可以使用<noscript>标签,是用来定义在脚本未被执行时的替代内容/文本.而且这样做还有一个好处,因为搜索引擎的爬虫是不处理JavaScript脚本的,所以能直接抓到<noscript>标签中的内容.复制代码代码如下:<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480"><noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>CSS样式设置:复制代码代码如下:.lazy {display: none;}JS代码:复制代码代码如下:$("zy").show().lazyload();设置图片加载的反应距离Lazy Load插件默认的设置是:图片在浏览器窗口上出现,就会触发加载.但通过设置 threshold 属性的值,可以调整图片的预先加载位置/距离.复制代码代码如下:$("zy").lazyload({ threshold : 200 });另外, threshold 可以为正数或者负数.正数是预先加载, 假设数值为200, 则图片距离出现到屏幕还有 200px 时,就开始加载.如果是负数,则相反.假设数值为-200时,则图片已经在窗口出现,并且距离浏览器视窗底部的距离为 200px 时,才开始加载.PS:图片和屏幕的距离是根据图片的 top 位置计算.注意:threshold的设置需要考虑网站的长度和图片的高度,如果数值过大则会导致无法加载的问题.建议数值设置不要超过相应图片高度的一半.通过事件触发加载可以通过jQuery定义的事件来触发加载,也可以使用自己定义的事件.复制代码代码如下:$("zy").lazyload({event : "click"});实现动画效果上面的Demo之所以会没有图片加载的效果,是因为Lazy Load默认的图片加载是通过 jQuery 的show()方法来显示,所以图片出现几乎是一瞬间.当然我们还可以实现其他效果.复制代码代码如下:$("zy").lazyload({effect : "fadeIn"});另外还可以使用 slideDown() 方法,但效果不佳.如果想要控制动画的速度,还可以修改 effectspeed 属性.复制代码代码如下:$("zy").lazyload({effect : "fadeIn",effectspeed : 1000});effectspeed 属性默认是空的,所以如果不设置它,动画的时间为400毫秒. Container容器属性当要延迟加载的图片全摆在一个容器中.只需把 container 属性指向摆放 img 的容器的对象.css代码:复制代码代码如下:#container {height: 600px;overflow: scroll;}js代码:复制代码代码如下:$("zy").lazyload({container: $("#container")});废话不多说,直接看Demo ,不单竖着的可以, 横着也行Demo .failure_limit的属性Lazy Load 有一个循环查找 img 的机制.根据 HTML 文档的布局从上往下查找,当找到第一个并未显示/加载的 img 时,就会停止往下查找.(其实就是对$("zy") 这个对象(组)进行顺序查找)那这个 failure_limit 的属性有什么用呢?现在网站设计时,都会用到大量的定位样式,如: float 和 position , 这样在浏览器呈现的布局效果和 HTML 文档中的 DOM 顺序有很大差异.这样就会存在一种情况,某 <img> 标签已出现在屏幕上,但它却无法显示!! 因为它在 HTML 文档中的实际位置排在了那些还没有显示的 <img> 标签后面, 这样会导致显示在屏幕上的这个 <img> 标签无法加载相应的图片.当Lazy Load 在找到第一个未显示的 <img> 标签时,查找已经被终止了, 并没有继续往下遍历.所以这个时候,就可以使用failure_limit属性.复制代码代码如下:$("zy").lazyload({failure_limit : 10});这样 Lazy Load 会查找到第10个未显示的<img>标签处.当在图片多且布局复杂的页面时, failure_limit 的作用就很大了.原文还温馨提示:If you have a funky layout set this number to something high. 如果你的网站布局很"变态",建议把该值调得更高.延迟下载图片可以通过自定义事件,然后通过 setTimeout 来设置延迟触发该事件.复制代码代码如下:$(function() {$("img:below-the-fold").lazyload({event : "sporty"});});$(window).bind("load", function() {var timeout = setTimeout(function() {$("zy").trigger("sporty")},5000);});主要原理是,当 event 被设置为 scroll 以外的事件时, 实际上都会绑定了一个内置的 "appear" 事件.顾名思义, 这个事件就是用来显示图片的. (其实scroll 也是调用这个事件)skip_invisible 加载不可见的图片Lazy Load 插件默认对隐藏的图片不加载(例如 display:none ). 这样做有助于性能的优化.如果希望连隐藏的图片一起加载,则可以把 skip_invisible 设为false .复制代码代码如下:$("zy").lazyload({ skip_invisible : false });。