Question

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

我有一个我正在做的精灵动画，但由于我想要使用这么多的图像，我必须在开始之前加载它们。

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

如何在运行计时器之前预加载图像？如果我正在使用＆＃34; img＆＃34; onload to preload，我是否必须使用另一个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>

编辑：

我最终得到了以下代码。但是，我想我要查看下面提到的精灵表方法。

我基本上尝试使用短片进行全屏视频，因为我在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。

你需要制作精灵表。单个图像看起来像this。

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

当需要绘制到画布上时，您将需要一个数组，其中包含较大图像中每个可能的精灵的x，y，width，height坐标。

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

这使您可以指定源矩形，每个图像的矩形都不同。具体而言，这些论点与此相对应：

enter image description here

Answer 2

这是一个html5示例，如何使用knockoutjs https://github.com/mazhekin/HTML5MultiLoadImages

加载多个图像

在html5 / javascript中预加载图像

2 个答案: