4

论坛中有几个关于此的问题，但我无法得到我需要的好答案。

我正在使用 Canvas 和 Javascript，我想在游戏打开后立即预加载一些图像。我举了一个我想要构建的方法的例子（但没有奏效）

我有 3 个文件：“main.html”在其中声明了画布（此示例中只有一个），我尝试加载图像，“ImagePreloader.js”在其中预加载所有图像，“Variables.js”在其中我有我的变量。

任何人都可以帮我解决这个图像预加载方法，或者建议我一个可行的方法吗？我认为图像没有加载，因为我没有使用 onLoad() 函数，我在目前阅读的教程中无法理解（我知道如何将它应用于图像，但不应用于图像数组）

主.html：

<!DOCTYPE HTML>
<html>
  <body>
    <canvas id="myCanvas" width="800" height="600"></canvas>

    <script type="text/javascript" src="Variables.js"></script>
    <script type="text/javascript" src="ImagePreloader.js"></script>
    <script>
    // Basic canvas info
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // Draw one of the images. Somehow it doesn't work :(
    context.drawImage(imageArray[3], x, y, width, height);
    </script>
  </body>
</html>

ImagePreloader.js

// This should preload the images in imageArray[i] with 0 <= i <= 5 ... right?
function preloader() 
 {
     for(var i=0; i<5; i++) 
     {
          imageArray[i].src=images[i];
     }
 }

变量.js

// array of sources of my images
images = new Array();
images[0]="img1.jpg"
images[1]="img2.jpg"
images[2]="img3.jpg"
images[3]="img4.jpg"
images[4]="img5.jpg"

// Stuff to draw the image
var x = 50;
var y = 50;
var width = 256;
var height = 256;

// Is this actually an array of images?
imageArray = new Image();

提前致谢！

4

3 回答 3

8

好吧，你会想要使用一个在某个点加载图像的函数，所以你不妨尝试理解 onLoad。掌握起来并不难。

"onload" 是一个 javascript 事件，在加载某些内容后立即发生。换句话说：onLoad就像一个 javascript-native 函数，它在加载某些内容时触发。那东西可以是一个窗口（例如：window.onload）或一个文档。您想要的是文档 onLoad 事件，因为它会在您的文档加载时触发。

让我们为您提供一个简单的示例...

<body onload="preloadMyImages();">

这告诉浏览器“当您加载文档后，运行preloadMyImages函数”。

您所要做的就是使用该功能将您的图像加载到客户端的浏览器缓存中。

function preloadMyImages() 
{
    var imageList = [
        "image.gif",
        "example/image.jpg",
        "whatever/image.png"
    ];
    for(var i = 0; i < imageList.length; i++ ) 
    {
        var imageObject = new Image();
        imageObject.src = imageList[i];
    }
}

这实际上总结了它并为您提供了一个完整的工作示例。享受！

编辑

因为-根据您的评论-您正在寻找更多帮助，我想向您指出https://stackoverflow.com/a/1038381/2432317（作为众多示例之一）显示了您可以如何（和可能应该 - 根据您计划在画布上绘制的内容）也使用 img.onload 。

然而，正如我在评论中所说：这完全取决于你想把它带到哪里。您对 Javascript 编码的深入了解越多，您就会越了解正在发生的事情。有几本好书（部分免费）解释了如何编写 Javascript、使用 HTML5 画布、创建预加载器、动画、讨论范围等。

快速检查一下搜索引擎的大 G 会发现大量示例和教程，这将对您有所帮助。许多示例之一：“如何在 HTML5 画布上绘制图像”，它通过简短而清晰的教程向您展示了预加载和循环动画。

但是，请不要指望我们为您编写所有代码 - 这不会发生。这是“边做边学”实际上会让你更聪明的不那么罕见的情况之一。如果您在实现最终目标的过程中遇到另一个问题，您可以随时发布与该新问题相关的新问题。

于 2013-07-03T05:32:32.517 回答
2

在使用之前，您必须确保这 5 个图像已加载（下载并不总是意味着它已加载并可以使用，只有 onload 才能保证图像可以使用）。

所以为图像添加onload，然后从onload函数中计数并在其中5个加载后触发绘制

function prefetchImages(sources){
        var images = [];
        var loadedImages = 0;
        var numImages = sources.length;
        for (var i=0; i < numImages; i++) {
            images[i] = new Image();
            images[i].onload = function(){
                if (++loadedImages >= numImages) {
                    //ready draw with my images now
                    drawThePainting();
                }
            };
            images[i].src = sources[i]; //bind onload before setting src bug in some chrome versions
        }
    };

prefetchImages(["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"]);

function drawThePainting(){
        // Basic canvas info
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // Draw one of the images. Somehow it doesn't work :(
    context.drawImage(imageArray[3], x, y, width, height);
}
于 2013-07-03T05:25:28.923 回答
1

尝试这个

put this script in head section
<script type="text/javascript">
    function preload(arrayOfImages) {
      for(i = 0 ; i < arrayOfImages.length ; i++)
         {
     var img = new Image();
             img.src = arrayOfImages[i];
         }
    }

 preload(['img1.png','img2.png']);
</script>
于 2013-07-03T05:24:47.633 回答