下载文档原格式
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实现图⽚延迟加载⽅法汇总（三种⽅法）看到⼀些⼤型⽹站，页⾯如果有很多图⽚的时候，当你滚动到相应的⾏时，当前⾏的图⽚才即时加载的，这样⼦的话页⾯在打开只加可视区域的图⽚，⽽其它隐藏的图⽚则不加载，⼀定程序上加快了页⾯加载的速度，对于⽐较长的页⾯来说，这个⽅案是⽐较好的。
原理是这样：页⾯可见区域以下的图⽚先不加载，等到⽤户向下滚动到图⽚位置时，再进⾏加载。
这样做的好处在哪⾥？——当页⾯有好⼏屏内容时，有可能⽤户只看前⼏屏的内容，这样我们就可以只加载⽤户需要看的图⽚，减少服务器向⽤户浏览器发送图⽚⽂件所产⽣的负荷，下⾯通过三种⽅法给⼤家介绍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"><!--<link rel="stylesheet" type="text/css" href="./styles.css" mce_href="styles.css">--></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网页图片延迟加载吗?我们积累了一些经验，在此拿出来与大家分享下。
第一步：下载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）话说前头：上次写了⼀篇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 zyload.js实现图片延迟懒加载极简方法如果你对网站速度优化有一定了解，或者你是用过百度统计提供的网站速度诊断工具的网站管理者，会知晓一件事：一个网站页面图片过多的话，加载时会导致网页打开变慢，甚至看得见“卡顿”的现象。
这不仅会影响用户的浏览体验，也会影响到搜索引擎对网站的优劣评判及seo。
（如上图所示，相比于js等文本类文件，三个红色标注的图片文件，就算kb更小，加载时间亦要久很多）对于较大型的、有专业程序员配置的网站运营者来说，为网站中的图片实现惰性加载(专业术语，俗称为延迟加载，懒加载)，是一件正常不过的事。
毕竟，懒加载不是什么新技术，好几年前就已经在较大的互联网站普及了。
那问题来了：什么是懒加载？答：懒加载是一种网页交互呈现效果。
通常而言，首次只加载第一屏（能看得见的）的图片，之后的图片则不加载（或只加载一个文件容量特别小的图片，称为占位图），如果用户拖动滚动条至后面某处位置（这处位置称为可视区域）则再加载图片，这样做的好处是避免网页因加载图片过多而打开慢的弊端。
两个字，提速！如果网站图片多，要提速，那懒加载就是web技术层面的标配。
提升网站页面加载速度，利于seo提升——懒加载好处看上去很多，只是要如何具体地用在自己的网站上呢？对于没有专业程序员参与的网站运营管理者来说，要实现懒加载并不是那么容易。
网上有一些教程，厉害的高手是自己写原生js来解决，更多快捷解决方案是使用zyload.js插件，有示例代码及演示（请自行搜索或参见此处链接），这个插件的使用并不难，如果是从零开始构建一个页面，直接套用是没有问题的，可是要套用在帝国cms制作好的网站里，得用什么方式方法呢？经过在学而行营销网的实践摸索，以下是帝国cms结合zyload.js 实现图片延迟懒加载的极简解决方法。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－首先，要下载zyload.js的迷你压缩版，此js文件相当小，只有2k大小。
![[前端]图片预加载方法](https://img.taocdn.com/s1/m/5cf9cefe4bfe04a1b0717fd5360cba1aa8118c99.png)
[前端]图⽚预加载⽅法 ⽬录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”，或者你也可以⾃定义事件，默认等待⽤户滚动，图⽚出现在可视区域。
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实现异步加载图⽚（懒加载图⽚⼀种⽅式）⾸先将插件在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链接同⼀个图⽚，这样⽹页就加载快好多，这个时候再异步的加载要加载的图⽚，也就现在要说的功能）以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
目录部分常用方法速查 (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的元素。
什么是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 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的。
怎样使用? 下面进入正题.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 });。
