最近项目中用到的一个功能,用户进入网站时显示loading页面,直到主页的几个大图片加载完成才渐隐进入主页。自己写了个插件,看起来结构挺糟糕的,不好意思放到项目里。在网上搜现成的,还挺多。不过得用英文关键词,搜中文的真是垃圾网站一大堆。废话完毕下面开始
第一个
1
2
3
4
5
6
7
8
9
10
11
12
|
(function($) {
varcache = [];
// Arguments are image paths relative to the current page.
$.preLoadImages =function() {
varargs_len = arguments.length;
for(vari = args_len; i--;) {
varcacheImage = document.createElement('img');
cacheImage.src = arguments[i];
cache.push(cacheImage);
}
}
})(jQuery)
|
使用方法
1
|
jQuery.preLoadImages("image1.gif","/path/to/image2.png");
|
这个来自这里:Engineered Web。可以看到其实这个是用原生JavaScript实现,使用jQuery是为了调用方便。
优点:原生JavaScript,速度快。
缺点:不支持回调函数。
第二个
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
// Helper function, used below.
// Usage: ['img1.jpg','img2.jpg'].remove('img1.jpg');
Array.prototype.remove =function(element) {
for(vari = 0; i <this.length; i++) {
if(this[i] == element) {this.splice(i,1); }
}
};
// Usage: $(['img1.jpg','img2.jpg']).preloadImages(function(){ ... });
// Callback function gets called after all images are preloaded
$.fn.preloadImages =function(callback) {
checklist =this.toArray();
this.each(function() {
$('<img>').attr({ src:this}).load(function() {
checklist.remove($(this).attr('src'));
if(checklist.length == 0) { callback(); }
});
});
};
|
使用方法
1
2
3
4
5
|
$.post('/submit_stuff', { id: 123 },function(response) {
$([response.imgsrc1, response.imgsrc2]).preloadImages(function(){
// Update page with response data
});
});
|
第二个函数来自 stackoverflow。
这个支持了回调函数,全部图片都加载完成后执行,我的项目中就是用的这个。
作者为了方便扩展了Array对象,使用时注意不要影响到其他的代码。
搜索的时候还发现一个更好用的:
第三个
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
(function($) {
varimgList = [];
$.extend({
preload:function(imgArr, option) {
varsetting = $.extend({
init:function(loaded, total) {},
loaded:function(img, loaded, total) {},
loaded_all:function(loaded, total) {}
}, option);
vartotal = imgArr.length;
varloaded = 0;
setting.init(0, total);
for(variinimgArr) {
imgList.push($("<img />")
.attr("src", imgArr[i])
.load(function() {
loaded++;
setting.loaded(this, loaded, total);
if(loaded == total) {
setting.loaded_all(loaded, total);
}
})
);
}
}
});
})(jQuery);
|
调用方法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
$(function() {
$.preload([
"http://farm3.static.flickr.com/2661/3792282714_90584b41d5_b.jpg",
"http://farm2.static.flickr.com/1266/1402810863_d41f360b2e_o.jpg"
], {
init:function(loaded, total) {
$("#indicator").html("Loaded: "+loaded+"/"+total);
},
loaded:function(img, loaded, total) {
$("#indicator").html("Loaded: "+loaded+"/"+total);
$("#full-screen").append(img);
},
loaded_all:function(loaded, total) {
$("#indicator").html("Loaded: "+loaded+"/"+total+". Done!");
}
});
});
|
这个来自这里 http://ditio.net,貌似是作者的一个插件中的一段代码。
支持三个回调函数:加载前、单个图片加载完成、全部图片加载完成。原作者还给了个演示网页,看演示网页的源代码就明白了。