在html5/javascript中预加载图像

Question

我已经看到了使用多个图像进行预加载的示例,但是我不知道如何将它们应用到我只有一个图像并且使用src交换帧的情况.

我有一个精灵动画,我正在做,但由于我想要使用这么多的图像,我将不得不在开始之前加载它们.

我知道每次切换和加载src时onload都会触发.

如何在运行计时器之前预加载图像？如果我使用"img"onload来预加载,我是否必须使用另一个Image对象来实际显示？

<script type="text/javascript">
function init(){
    var numLabel;
    var imgNumber = 1;
    var lastImgNumber = 668;
    var canvas = document.getElementById("mycanvas");
    var context = canvas.getContext("2d");
    var img = new Image;

    img.onload = function(){
        context.clearRect(0,0,context.canvas.width,context.canvas.height);
        context.drawImage(img,0,0);
    };
    var timer = setInterval(function(){
        if(imgNumber>lastImgNumber){
        clearInterval(timer);
        }else{
        numLabel = padNum(imgNumber++,5);
        img.src = "sprite images/opt/movie"+numLabel+".jpg";
        }
    }, 1000/24);
}
function padNum(num, digits){ 
    var str = num + ""; 
    return num.length >= digits? str: padNum("0" + str, digits);
}
</script>

编辑:

我最终得到了以下代码.但是,我想我要查看下面提到的sprite sheet方法.

我基本上尝试用短片做全屏视频,因为我一直在阅读html5中的视频仍然有全屏问题.此外,我认为我可以获得更好的质量.

<script type="text/javascript">
        var imageArray = new Array();
        var loadedImages = new Array();

        function init(){

            buildImageArray(); //Execute the function to create the array of images
            var total = imageArray.length;
            var count = 0;



            // loop through the images and load.
            while(count < total) {
                loadImage("sprite images/opt/" + imageArray[count],count);


                count++;
            }


        }


        function padNum(num, digits){ 
            var str = num + ""; 
            return num.length >= digits? str: padNum("0" + str, digits);
        }

        function buildImageArray(){
            var firstImage = 1;
            var lastImgNumber = 668;
            var numLabel;


            for(var i = firstImage; i<lastImgNumber+1;i++){
                numLabel = padNum(i,5);
                imageArray.push("movie"+numLabel+".jpg");
            }
        }


        function loadImage(imageSrc,position) {
        // actual function that loads image into DOM

        var image = new Image(); // local scope, new object created per instance.
        image.onload = function() {
            if (!image) return;

            loadedImages[position] = image.src; // record this image path as loaded in global scope
            // or... store the objects themselves so you can inject them:
            // loadedImages.push(this);

            // sample report of progress
            reportProgress();

            // remove event and self to prevent IE on animated gif loops and clear up garbage.
            image = image.onload = image.onabort = image.onerror = null;
        };

        image.src = imageSrc;
        }


         function reportProgress() {
        // used to show how many images loaded thus far and / or trigger some event you can use when done.

        // optional to show onscreen..., 'where' should be an object referencing an element in the DOM
        // to do it silently, just remove the output bits below.
        var output = "loaded ";
        output += loadedImages.length;
        output += " of ";
        output += imageArray.length;
        output += " images.";
        $("#loader").html(output);

            // this bit will fire when all images done:
            if (imageArray.length == loadedImages.length) {
                // total images onComplete. done. rewrite as you deem fit - call your main site load function from here

                // keep in mind that if 1 of your images is a 404, this function may not fire, you
                // may want to assign onerror and onabort events

                //fire beginAnimation
                beginAnimation();
            }
        }


        function beginAnimation(){
            var canvas = document.getElementById("mycanvas");
            var context = canvas.getContext("2d");
            var img = new Image;
            var imgNumber = 0;
            var lastImgNumber = 667;


            img.onload = function(){
                context.clearRect(0,0,context.canvas.width,context.canvas.height);
                context.drawImage(img,0,0);


            };
            var timer = setInterval(function(){
                if(imgNumber>lastImgNumber){

                    clearInterval(timer);

                }else{

                    img.src = loadedImages[imgNumber];
                }
                imgNumber++;


            }, 1000/20);

        }

    </script>

Answer 1

这不是解决这个问题的方法.

如果数量较小,我会提供第二种解决方案,但如果您认真拥有668张图像,则需要减少数量.你不希望每个用户(和你的服务器)发出668个请求,你当然也不希望一个IMG不断地交换src.

你需要制作精灵表.一个看起来像这样的图像.

使用像texturepacker这样的东西来制作你的单图像精灵表:http://www.texturepacker.com/

当需要绘制到画布上时,您将需要一个数组,其中包含较大图像中每个可能的精灵的x,y,宽度,高度坐标.

而不是drawImage(img, x, y)你将使用canvas方法drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh).

这允许您指定源矩形,对于每个图像,它将是不同的.特别是那些参数对应于此: