检查加载的多个图像 [英] Checking for multiple images loaded

问题描述

我使用html5的canvas功能。我有一些图像绘制在画布上，我需要检查他们都已加载，我可以使用它们之前。

I'm using the canvas feature of html5. I've got some images to draw on the canvas and I need to check that they have all loaded before I can use them.

我已经声明他们在数组，我需要一种方法来检查他们是否都同时加载，但我不知道该如何做。

I have declared them inside an array, I need a way of checking if they have all loaded at the same time but I am not sure how to do this.

这是我的代码：

var color = new Array();
color[0] = new Image();
color[0].src = "green.png";
color[1] = new Image();
color[1].src = "blue.png";

目前为了检查图片是否已加载，我必须逐个完成，

Currently to check if the images have loaded, I would have to do it one by one like so:

color[0].onload = function(){
//code here
}
color[1].onload = function(){
//code here
}

如果我有更多的图像，我将在开发中，这将是一个真正低效的方式来检查他们。

If I had a lot more images, Which I will later in in development, This would be a really inefficient way of checking them all.

推荐答案

一个黑客的方法是将JS命令添加到另一个文件和地方它在页脚。

A hackish way to do it is add the JS command in another file and place it in the footer. This way it loads last.

但是，使用jQuery（document）.ready也比本地window.onload更好。

However, using jQuery(document).ready also works better than the native window.onload.

您使用Chrome不是吗？

You are using Chrome aren't you?

这篇关于检查加载的多个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！