Question

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

我正在进入Canvas和Javascript，我希望在游戏打开后立即预加载一些图像。我举了一个我想要构建（并且没有工作）的方法的例子

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

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

main.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];
     }
 }

Variables.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();

提前致谢！

Answer 1

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

“onload”是在加载某事之后立即发生的javascript事件。换句话说： onLoad 就像一个javascript本机函数，当某些东西被加载时触发。某些可以是一个窗口（例如：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的搜索引擎会提供大量的示例和教程，这对您有所帮助。许多示例中的一个：“How To Draw Images Onto Your HTML5 Canvas”，它显示您在简短而清晰的教程中预加载和循环动画。

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

Answer 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);
}

Answer 3

试试这个

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>

用Javascript预加载图片？没有jQuery

3 个答案: