图片预加载插件

感觉自己最近越来越懒散了,一直没有好好的写过什么东西。正好前几次的项目都是h5页面,基本都是使用swiper插件和css3动画来完成。效果就类似 易企秀生成的页面效果。不过这类页面一般都一个特点,那就是页面中有大量的图片,如果图片压缩不到位或者网络欠佳,很可能就会出现页面已经开始动画,但是 图片没有加载完全的情况。

为了避免这类情况,不得不去调用一个预加载插件,这里,我简化了之前同事写的一个图片预加载插件。
代码如下:

// 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();
            }
        }    
    }    
}

其实思路很简单,就是先将需要加载的图片写在一个数组里,然后对这个数组进行遍历,每遍历一次都new一个Image对象,并将它的src设置为当前数组 元素的值(这个值其实就是图片的路径)。然后再该image对象的onload事件里进行计数,每onload成功一张图片,n的数量就+1,当然,我们 不能排除由于网络问题或者路径写错的情况下图片加载失败。因此如果image加载失败,也就是onerror的时候,n的数量也要自+1,这样在接下来判 断n是否等于数组长度的时候就不会出错,导致后续回掉函数无法执行的情况。

该插件使用方法也比较简单,由于使用了prototype来新增方法,所以在使用时要new一个preImg()函数。
如下:

var preImgLoad = new preImg(function(){
        //这里是回调函数内容
    });

这里的回掉函数,将会在IMG数组里的所有图片加载完成之后执行。

原谅我用如此贫瘠的语言和肤浅的代码讲完这篇笔记,哈哈哈。

发表评论

电子邮件地址不会被公开。 必填项已用*标注