感觉自己最近越来越懒散了，一直没有好好的写过什么东西。正好前几次的项目都是h5页面，基本都是使用swiper插件和css3动画来完成。效果就类似 易企秀生成的页面效果。不过这类页面一般都一个特点，那就是页面中有大量的图片，如果图片压缩不到位或者网络欠佳，很可能就会出现页面已经开始动画，但是 图片没有加载完全的情况。
为了避免这类情况，不得不去调用一个预加载插件，这里，我简化了之前同事写的一个图片预加载插件。
代码如下：
[code lang=”js”]
// JavaScript Document
var IMGPATH = "image/" //图片路径前缀 方便控制图片路径
//图片名称数组
var IMG = [
"bg1-2.jpg",
"bg1-3.jpg",
"bg1-4.jpg",
"bg1-5.jpg",
"bg2-1.jpg",
"bg2-2.jpg",
"bg2-3.jpg",
"bg2-4.jpg",
"bg3-1.jpg",
"bg3-1.jpg",
"bg4-1.jpg",
"bg6-1.jpg",
"bg6-2.jpg",
"bg6-3.jpg",
"bg6-4.jpg",
"bg6-5.jpg",
"bg5.jpg",
"about.jpg",
"back.png",
"chanye.jpg",
"connect.jpg",
"fengcai.jpg",
"home.jpg",
"icons.png",
"icons2.png",
"index_bg.jpg",
"jtgk.png",
"link.jpg",
"li-on.png",
"logo.png",
"logo-bg.png",
"logo-bg1.png",
"logo-bg2.png",
"map.jpg",
"pic1.jpg",
"pic2.jpg",
"pic3.jpg",
"pic4.jpg",
"pic5.jpg",
"pic6.jpg",
"pic7.jpg",
"pic8.jpg",
"pp.png",
"tab-active.png",
"tabhead.png",
"tabhead2.png",
"tab-liac.png",
"tab-libg.png",
"title-bg.png",
"txt1.png",
"txt2.png",
"txt-tle.png",
"up.png",
"up2.png",
"asdfaw.jpg"
];
function preImg(fn){
this.init(fn);
}
preImg.prototype.init = function(fn){
var path = IMG;
for(var i = 0; i<IMG.length;i++){
path[i] = IMGPATH + path[i];
}
this.isLoaded(path,fn);
}
preImg.prototype.isLoaded = function(imgArr,fn){
var arr = imgArr,
length = arr.length,
img = [],
n = 0,
error = 0;
for(var i=0;i<length;i++){
img[i] = new Image();
img[i].src = arr[i];
img[i].onload = function(){
n++;
if(n==length){
console.log("加载完毕",length);
fn();
}
}
img[i].onerror = function(){
n++;
error++;
if(n==length){
console.log("加载完毕但是有"+error+"张图加载失败！");
fn();
}
}
}
}
[/code]
其实思路很简单，就是先将需要加载的图片写在一个数组里，然后对这个数组进行遍历，每遍历一次都new一个Image对象，并将它的src设置为当前数组 元素的值（这个值其实就是图片的路径）。然后再该image对象的onload事件里进行计数，每onload成功一张图片，n的数量就+1，当然，我们 不能排除由于网络问题或者路径写错的情况下图片加载失败。因此如果image加载失败，也就是onerror的时候，n的数量也要自+1，这样在接下来判 断n是否等于数组长度的时候就不会出错，导致后续回掉函数无法执行的情况。
该插件使用方法也比较简单，由于使用了prototype来新增方法，所以在使用时要new一个preImg()函数。
如下：
[code lang=”js”]
var preImgLoad = new preImg(function(){
//这里是回调函数内容
});
[/code]
这里的回掉函数，将会在IMG数组里的所有图片加载完成之后执行。
原谅我用如此贫瘠的语言和肤浅的代码讲完这篇笔记，哈哈哈。