javascript图片预加载

/**
 * 图片资源管理器
 */
(function() {

    var ImageManager = {
        /**
         * @private
         */
        __loadList : {},
        /**
         * @private
         */
        __loadImage : function(item, callback) {
            var image = new Image();
            image.onload = function() {
                ImageManager.__loadList[item.id] = image;
                callback();
            }
            image.src = item.src;
        },
        /**
         * 加载图片资源
         * @param {Array} images @format {id: '', src: ''}
         * @param {Function} statechange
         */
        load : function(images, statechange, __index) {
            __index = __index || 0;
            if(images[__index]) {
                ImageManager.__loadImage(images[__index], function() {
                    ImageManager.load(images, statechange, __index + 1);
                });
            }
            statechange(__index);
        },
        /**
         * 获取已加载的Image对象
         * @param {String} id
         */
        get : function(id) {
            return this.__loadList[id];
        }
    }

    my.ImageManager = ImageManager;
})();
图片文件资源类
/**
 * 图像资源列表
 */
function getImageRes() {
    return [{
        id : 'index',
        src : 'images/v5_loading.png'
    },{
		id:"bg_hole",
		src:"images/v5_run1.png"
	},{
		id:"bg_holeHide",
		src:"images/v5_run2.png"
	},{
		id:"mouse",
		src:"images/v5_run3.png"
	},{
		id:"help",
		src:"images/v5_index.png"
	},{
		id:"star",
		src:"images/v5_gowc_nov5.png"
	},{
		id:"star",
		src:"images/v5_gowc_nov5_item.png"
	},{
		id:"icon",
		src:"images/v5_gowc_havev5.png"
	},{
	    id:"time_roller",
		src:"images/wc.png"
	}];
}

预加载主类

(function () {
    var imageResources = getImageRes();
    my.ImageManager.load(imageResources, loadImageResources);
    /**
     * 加载图片资源
     */
    function loadImageResources(number) {
//循环加载图片 并记录进度百分比
        $('#progressText').html((number / imageResources.length * 100) + '%');
        if (number < imageResources.length) {
            return false;
        }

        //执行后续代码
            init();
        
    }});

使用：

在canvas里可以使用 
my.ImageManager.get('index')方法获取Image

html的img 或者 background-image 则可以直接照常写  因为图片已经在缓存中 不会再加载