前端开发 图片预加载插件

微信开发和前端有区别吗|前端开发计划 怎么写

代码如下:

// 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() {
    //这里是回调函数内容
})
微信跳一跳属于前端开发吗|微信开发前端接口文档|自学web前端开发 知乎

» 本文来自:前端开发者 » 《前端开发 图片预加载插件》
» 本文链接地址:https://www.rokub.com/5235.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!