HTML5页面的图片等资源可以通过设置Image.src完成预加载。主要代码如下：

    var image = new Image();
    image.onload = function () {
        uploadPreloadProgress(1); // 更新加载进度
    }
    image.src = imgPath;

定义精灵类

    var catchedImages = new Array();
    class Spirit {
        constructor(name) {
            this.name = name;
            this.images = new Array();
        }
        i2s(id) {
            var s = "";
            if (id < 10) {
                s = "000" + id;
            }
            else if (id < 100) {
                s = "00" + id;
            }
            else if (id < 1000) {
                s = "0" + id;
            }
            else {
                s = id;
            }
            return s;
        }
        load(path, ext, start, count) {
            for (var i = 0; i < count; i++) {
                this.images[i] = new Image();
                catchedImages.push(this.images[i]);
                this.images[i].onload = function () {
                    uploadPreloadProgress(1); // 更新完成1张图片预加载
                }
                var imgSrc = path + this.i2s(i + start) + ext;
                this.images[i].src = imgSrc;
            }
        }
        loadImage(path) {
            var i = this.images.length;
            this.images[i] = new Image();
            catchedImages.push(this.images[i]);
            this.images[i].onload = function () {
                uploadPreloadProgress(1);
            }
            this.images[i].src = path;
        }
    }

Image.src设置图片路径，并将预加载图片加入缓存列表。Image.onload函数在加载图片完成后执行。注意，Image.src要写在onload之后，否则ie浏览器可能会不执行onload，据说是因为图片太小，设置src时，onload回调还没设置就完成加载了。

定义预加载函数

    function Preload() {
        for (var i = 0; i < 10; ++i) {
            Rivers[i] = new Spirit("River" + i);
            Rivers[i].load("River6/" + Rivers[i].i2s(i) + "/" + "RowingRiver02.", ".jpg", 50, 30);
        }
        HitFx.load("explode/explode_", ".png", 0, 8);
        AcceFx.load("wave2/", ".png", 2, 5);
        Player.load("Boat_Red2/NewLevelSequence.", ".png", 0, 37);
        RiverMask.loadImage("img/RowingRiverMask7.jpg");
        BoatMask.loadImage("img/BoatMask4.jpg");
        TurnLeft.loadImage("img/left.png");
        TurnRight.loadImage("img/right.png");

        // load other catched image
        CatchImage.loadImage("img/dtbg2.png");
        CatchImage.loadImage("img/false.png");
        CatchImage.loadImage("img/gamesm.png");
        CatchImage.loadImage("img/listbg.png");
        CatchImage.loadImage("img/true.png");
        CatchImage.loadImage("img/false.png");
        CatchImage.loadImage("img/5.png");
        CatchImage.loadImage("img/4.png");
        CatchImage.loadImage("img/3.png");
        CatchImage.loadImage("img/2.png");
        CatchImage.loadImage("img/1.png");
    }

计算预加载进度,catchedImages.length获取需要预加载图片数量，loaded计数器计算已经完成Image.onload加载的数量。已加载图片数量➗预加载图片总数，得到近似的加载进度

    var loaded = 0;
    function uploadPreloadProgress(num) {
        loaded += num;
        var progress = loaded / catchedImages.length * 100;
        if (progress > 100) {
            progress = 100;
        }
        $("#loading").html("正在加载[" + progress.toFixed(0) + "%]...");
        if (progress >= 100) {
            OnLoadCompleted(); // 加载完成
        }
    }

执行预加载函数，注意，预加载函数不要放在document.ready里面执行。

<script>
Preload(); 、、 预加载
</script>