Jquery实现图片预加载与延时加载的方法
本文实例讲述了Jquery实现图片预加载与延时加载的方法。分享给大家供大家参考。具体分析如下：
有很多项目经常会需要判断图片加载完成后执行相应的操作，或者需要图片延迟加载，网上虽然已经有很不错的插件，但要为这些效果还得单独加载一个插件的话总感觉有点不舒服，干脆自己写了个方法：
functionloadimg(arr,funLoading,funOnLoad,funOnError){
varnumLoaded=0,
numError=0,
isObject=Object.prototype.toString.call(arr)==="[objectObject]"?true:false;
vararr=isObject?arr.get():arr;
for(ainarr){
varsrc=isObject?$(arr[a]).attr("data-src"):arr[a];
preload(src,arr[a]);
}
functionpreload(src,obj){
varimg=newImage();
img.onload=function(){
numLoaded++;
funLoading&&funLoading(numLoaded,arr.length,src,obj);
funOnLoad&&numLoaded==arr.length&&funOnLoad(numError);
};
img.onerror=function(){
numLoaded++;
numError++;
funOnError&&funOnError(numLoaded,arr.length,src,obj);
}
img.src=src;
}
}参数说明：
arr：可以是存放图片路径的一个数组，也可以是选取到的img的jquery对象；
funLoading：每一个单独的图片加载完成后执行的操作；
funOnLoad：全部图片都加载完成后的操作；
funOnError：单个图片加载出错时的操作。
如：
varimgonload=function(errors){
/*errors：加载出错的图片数量；*/
console.log("loaded,"+errors+"imagesloadederror!");
}
varfunloading=function(n,total,src,obj){
/*
n：已加载完成的数量；
total：总共需加载的图片数量；
src：当前加载完成的图片路径；
obj：当loadimg函数中传入的arr为存放图片路径的数组时，obj=src，是图片路径，
当arr为jquery对象时，obj是当前加载完成的imgdom对象。
*/
console.log(n+"of"+total+"picloaded.",src);
varnewimg=document.createElement("img");
newimg.src=src;
$("body").append(newimg).fadeIn();
}
varfunloading_obj=function(n,total,src,obj){
console.log(n+"of"+total+"picloaded.",src);
$(obj).attr("src",src);
$(obj).fadeIn(200);
}
varfunOnError=function(n,total,src,obj){
console.log("the"+n+"stimgloadedError!");
}调用示例：
console.log("loading...");
loadimg($("img"),funloading_obj,imgonload,funOnError);
/*loadimg(["http://pic22.nipic.com/20120619/9607634_212642465144_2.jpg",
"/20120531/1670912_103610084349_2.jpg",
"/20120616/4952071_130629530136_2.jpg",
"/20120610/1723580_105037029000_2.jpg",
"http://pic22.nipic.com/20120617/2572038_125013326121_2.jpg"
],funloading,imgonload,funOnError);*/上面算是原生态写法了，下面我们介绍一个基于LazyLoad,延迟加载图片的jQuery插件
LazyLoad依赖于jQuery.请将下列代码加入页面head区域:
<scriptsrc="jquery.js"type="text/javascript"></script> <scriptsrc="jquery.lazyload.js"type="text/javascript"></script>
你必须修改HTML代码.在src属性中设置展位符图片,demo页面使用1x1像素灰色GIF图片.并且需要将真实图片的URL设置到data-original属性.这里可以定义特定的class以获得需要延迟加载的图片对象.通过这种方法你可以简单地控制插件绑定.
<imgclass="lazy"src="img/grey.gif"data-original="img/example.jpg" width="640"heigh="480">
处理图片的代码如下.
$("img.lazy").lazyload();这将使所有class为lazy的图片将被延迟加载.可以参考基本选项demo
设置敏感度
几乎所有浏览器的JavaScript都是激活的.然而可能你仍希望能在不支持JavaScript的客户端展示真实图片.当浏览器不支持JavaScript时优雅降级,你可以将真实的图片片段在写<noscript>标签内.
<imgclass="lazy"src="img/grey.gif"data-original="img/example.jpg" width="640"heigh="480"> <noscript><imgsrc="img/example.jpg"width="640"heigh="480"></noscript>
可以通过CSS隐藏占位符.
.lazy{
display:none;
}在支持JavaScript的浏览器中,你必须在DOMready时将占位符显示出来,这可以在插件初始化的同时完成.
$("img.lazy").show().lazyload();这些都是可选的,但如果你希望插件平稳降级这些都是应该做的.
设置敏感度
默认情况下图片会出现在屏幕时加载.如果你想提前加载图片,可以设置threshold选项,设置threshold为200令图片在距离屏幕200像素时提前加载.
$("img.lazy").lazyload({threshold:200});
占位图片
你还可以设定一个占位图片并定义事件来触发加载动作.这时需要为占位图片设定一个URL地址.透明,灰色和白色的1x1象素的图片已经包含在插件里面.
事件触发加载
事件可以是任何jQuery时间,如:click和mouseover.你还可以使用自定义的事件,如:sporty和foobar.默认情况下处于等待状态,直到用户滚动到窗口上图片所在位置.在灰色占位图片被点击之前阻止加载图片,你可以这样做:
$("img").lazyload({
placeholder:"img/grey.gif",
event:"click"
});使用特效
当图片完全加载的时候,插件默认地使用show()方法来将图显示出来.其实你可以使用任何你想用的特效来处理.下面的代码使用FadeIn效果.这是效果演示页面.
$("img.lazy").lazyload({
effect:"fadeIn"
});图片在容器里面
你可以将插件用在可滚动容器的图片上,例如带滚动条的DIV元素.你要做的只是将容器定义为jQuery对象并作为参数传到初始化方法里面.这是水平滚动演示页面和垂直滚动的演示页面.
#container{
height:600px;
overflow:scroll;
}
$("img.lazy").lazyload({
container:$("#container")
});当图片不顺序排列
滚动页面的时候,LazyLoad会循环为加载的图片.在循环中检测图片是否在可视区域内.默认情况下在找到第一张不在可见区域的图片时停止循环.图片被认为是流式分布的,图片在页面中的次序和HTML代码中次序相同.但是在一些布局中,这样的假设是不成立的.不过你可以通过failurelimit选项来控制加载行为.
$("img.lazy").lazyload({
failure_limit:10
});将failurelimit设为10令插件找到10个不在可见区域的图片是才停止搜索.如果你有一个猥琐的布局,请把这个参数设高一点.
延迟加载图片
LazyLoad插件的一个不完整的功能,但是这也能用来实现图片的延迟加载.下面的代码实现了页面加载完成后再加载.页面加载完成5秒后,指定区域内的图片会自动进行加载.这是延迟加载演示页面.
$(function(){
$("img:below-the-fold").lazyload({
event:"sporty"
});
});
$(window).bind("load",function(){
vartimeout=setTimeout(function(){$("img.lazy").trigger("sporty")},5000);
});加载隐藏的图片
可能在你的页面上埋藏可很多隐藏的图片.比如插件用在对列表的筛选,你可以不断地修改列表中各条目的显示状态.为了提升性能,LazyLoad默认忽略了隐藏图片.如果你想要加载隐藏图片,请将skip_invisible设为false
$("img.lazy").lazyload({
skip_invisible:false
});
希望本文所述对大家的javascript程序设计有所帮助。