预加载js

new_gist_file.js

//预加载 jQuery版本
!(function() {
    var preloader = function(opts) {
        var _this = this;
        _this.files = opts.files;
        _this.current = 0;
        _this.progress = opts.progress;
        _this.complete = opts.complete;
        _this.container = document.createElement("div");
        _this.container.style.cssText = "position:absolute;left:-1000px;top:0;width:1px;height:1px;overflow:hidden";
        document.body.appendChild(_this.container);
        for (var i = 0; i < _this.files.length; i++) {
            var file = _this.files[i];
            var fileExt = file.split(".");
            var fileType = fileExt[fileExt.length - 1];
            if (fileType === "css" || fileType === "js" || fileType === "json") {
                _this.loadResource(file)
            } else {
                _this.loadImage(file)
            }
        }
        if (_this.files.length === 0) {
            _this.progress(null, null, 100);
            _this.complete()
        }
    };
    preloader.prototype.loadTrigger = function(err, response) {
        var _this = this;
        _this.current++;
        _this.progress(err, response, (_this.current / _this.files.length * 100).toFixed(0));
        if (_this.current == _this.files.length) {
            _this.complete()
        }
    };
    preloader.prototype.loadImage = function(file) {
        var _this = this;
        var image = new Image();
        image.onload = function() {
            _this.loadTrigger(null, image);
            image.onload = null;
            _this.container.appendChild(image)
        };
        image.onerror = function() {
            _this.loadTrigger(null, image);
            image.onload = null
        };
        image.src = file
    };
    preloader.prototype.loadResource = function(file) {
        var _this = this;
        var request = new XMLHttpRequest();
        request.open("GET", file, true);
        request.addEventListener("load", function() {
            _this.loadTrigger(null, request.response)
        });
        request.addEventListener("error", function() {
            var statusCode = request.status;
            var statusText = request.statusText;
            var error = new Error(statusText);
            error.status = statusCode;
            _this.loadTrigger(error, request.response)
        });
        request.send()
    };
    if (typeof define === "function" && define.amd) {
        define("preloader", [], function() {
            return preloader
        })
    }
    return window.preloader = preloader
})();

//使用
// 预加载资源
var preload = [
    "http://mat1.gtimg.com/hb/chenz/fczhuli/images/loadding.png",
    "http://mat1.gtimg.com/hb/chenz/fczhuli/images/6.jpg",
    "http://mat1.gtimg.com/hb/chenz/fczhuli/images/5.jpg",
    "http://mat1.gtimg.com/hb/chenz/fczhuli/images/4_1.png",
    "http://mat1.gtimg.com/hb/chenz/fczhuli/images/4_2.png",
    "http://mat1.gtimg.com/hb/chenz/fczhuli/images/4_3.png",
    "http://mat1.gtimg.com/hb/chenz/fczhuli/images/4.jpg",
    "http://mat1.gtimg.com/hb/chenz/fczhuli/images/3.jpg",
    "http://mat1.gtimg.com/hb/chenz/fczhuli/images/2.jpg",
    "http://mat1.gtimg.com/hb/chenz/fczhuli/images/1.jpg"
];

// 预加载动画
new preloader({
    files: preload,
    progress: function(err, response, percent) {
        $('.preloader-percent').text(percent + '%');
    },
    complete: function() {
        // 隐藏加载器
        $('.preloader').hide();
    }
});