比较好用的实现图片批量加载的js

在手机端进行h5加载的时候通常会对图片进行预加载，使页面展示过程中不会出现图片刷新的情况，同时预加载过程中进行一些有趣的loading页面，现在分享一个预加载的js

! function() {
                var t = function(t) {
                    if ("function" != typeof t) throw new Error("Invalid callback");
                    this.cb = t, this.images = [], this.sounds = [], this.__cachedSnds = {}
                };
                t.prototype.addImage = function(t) {
                    this.images.push(t)
                }, t.prototype.addSound = function(t) {
                    this.sounds.push(t)
                }, t.prototype.addImages = function(t) {
                    "object" == typeof t && t.length && (this.images = this.images.concat(t))
                }, t.prototype.addSounds = function(t) {
                    "object" == typeof t && t.length && (this.sounds = this.sounds.concat(t))
                }, t.prototype.load = function() {
                    for (var t = this.images.length, o = 0, n = this.sounds.length, i = this.cb, s = t + n, e = function() {
                        o++, i("progress", o / s), o == s && i("complete")
                    }, r = 0; r < this.images.length; r++) {
                        var h = new Image;
                        h.onload = function() {
                            this.onload = null, e()
                        }, h.onerror = function() {
                            this.onerror = null, i("error", this.src), e()
                        }, h.src = this.images[r]
                    }
                    var u = this;
                    for (r = 0; r < this.sounds.length; r++) {
                        var a = this.sounds[r],
                            c = new Audio(a);
                        c.__dturl = a, c.oncanplaythrough = function() {
                            clearTimeout(this.__timeoutId), this.oncanplaythrough = null, this.onerror = null, u.__cachedSnds[this.__dturl] = this, e()
                        }, c.onerror = function() {
                            clearTimeout(this.__timeoutId), this.oncanplaythrough = null, this.onerror = null, i("error", this.__dturl), e()
                        }, c.__timeoutId = setTimeout(function(t) {
                            t.oncanplaythrough()
                        }, 100, c), c.load()
                    }
                }, t.prototype.getSound = function(t) {
                    return this.__cachedSnds[t] || null
                }, window.Preloader = {
                    create: function(o) {
                        return new t(o)
                    }
                }
            }();

使用方法：

var loader = Preloader.create(function(type, val) {
                    switch (type) {
                        case "complete":
                           //加载完成后的动作break;
                        case "progress":
　　　　　　　　　　　　　　//加载过程中的动作
                            $('.double-bounce3').html(parseInt(val*100)+"%");
                        break;
                    }
                });
                loader.addImages([
                "img/title1.jpg",
                "img/icon_up.png",
                "img/music_on.png",
                "img/music_off.png",
                
                "img/page/page1.jpg",
                "img/page/page2.jpg",
                "img/page/page3.jpg",
                "img/page/page4.jpg",
                "img/page/page5.jpg",
                "img/page/page6.jpg",
                
                "img/page/error_button.png",
                "img/page/error1.png",
                "img/page/error2.png",
                "img/page/error3.png",
                "img/page/movie1.jpg",
                "img/page/movie2.jpg",
                "img/page/movie3.jpg",
                "img/page/movie4.jpg",
                "img/page/movie5.jpg",
                "img/page/movie6.jpg",
                
                "img/page/word6.png"
                ]);
                loader.load();

 

转载于:https://www.cnblogs.com/hulalalastar/p/5363770.html