[英]Check if Images are loaded before gameloop
到目前为止,我的程序按照我想要的方式工作。 这很好用:
// Player object
var player = {
x: 10,
y: 10,
draw: function () {
ctx.drawImage(playerImg, 0, 0);
...
我应该检查是否playerImg
加载了playerImg
,即使它到目前为止工作正常吗?
另外,检查的最佳方法是什么。 我正在考虑将所有图像放在一个数组中。 然后使用onLoad
函数进行检查。 如果它们都已加载,那么我将开始游戏循环。 这是一个好主意吗?
谢谢
您需要检查图像是否已加载,因为图像加载是异步的。 您可能会遇到代码有时无法正常工作的情况。 这主要是因为您的图像存在于缓存中,并且浏览器能够在调用drawImage
之前足够快地加载它,或者图像存在于本地磁盘上。
但是,新用户需要先下载数据,并且您不希望首次使用的用户遇到错误,例如由于未完成加载而未显示图像。
因为它是异步的,所以当图像加载在后台进行时 ,代码将继续执行。 这可能导致您的代码在图像加载完成之前执行。 因此处理图像加载很重要
您可以先加载所有图像(或需要以其开头的图像),然后可以使用数组定义它们:
var imageURLs = [url1, url2, url3, ...],
images = [],
count = imageURLs.length;
然后迭代并创建图像元素:
for(var i = 0; i < count; i++) {
/// create a new image element
var img = new Image();
/// element is valid so we can push that to stack
images.push(img);
/// set handler and url
img.onload = onloadHandler;
img.src = imageURLs[i];
/// if image is cached IE (surprise!) may not trigger onload
if (img.complete) onloadHandler().bind(img);
}
并在回调函数中执行库存计数:
function onloadHandler() {
/// optionally: "this" contains current image just loaded
count--;
if (count === 0) callbackDone();
}
回调是您接下来要执行的代码。 您的图像将以与imageURLs
相同的顺序出现在数组images
中。
对于生产,还应该合并一个onerror
处理程序,以防出现问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.