[英]Check if Images are loaded before gameloop
So far my program is working the way I want it to. 到目前为止,我的程序按照我想要的方式工作。 This works fine:
这很好用:
// Player object
var player = {
x: 10,
y: 10,
draw: function () {
ctx.drawImage(playerImg, 0, 0);
...
Should I check if playerImg
is loaded first, even though it works correctly so far? 我应该检查是否
playerImg
加载了playerImg
,即使它到目前为止工作正常吗?
Also, what is the best way to check. 另外,检查的最佳方法是什么。 I was thinking about putting all the images in an array.
我正在考虑将所有图像放在一个数组中。 Then check with the
onLoad
function. 然后使用
onLoad
函数进行检查。 If they are all loaded then I will start the game loop. 如果它们都已加载,那么我将开始游戏循环。 Is this a good idea?
这是一个好主意吗?
Thanks 谢谢
You need to check if the image is loaded as image loading is asynchronous. 您需要检查图像是否已加载,因为图像加载是异步的。 You may experience that your code works sometimes without.
您可能会遇到代码有时无法正常工作的情况。 This is mainly because your image exists in the cache and the browser is able to load it fast enough before the
drawImage
is called, or the image exists on local disk. 这主要是因为您的图像存在于缓存中,并且浏览器能够在调用
drawImage
之前足够快地加载它,或者图像存在于本地磁盘上。
However, new users will need to download the data first and you don't want first-time users to experience errors such as images not showing because they are not finished loading. 但是,新用户需要先下载数据,并且您不希望首次使用的用户遇到错误,例如由于未完成加载而未显示图像。
As it works asynchronous your code will continue to execute while the image loading takes place in the background. 因为它是异步的,所以当图像加载在后台进行时 ,代码将继续执行。 This may cause your code to execute before the image has finished loading.
这可能导致您的代码在图像加载完成之前执行。 So handling image loading is important
因此处理图像加载很重要
You can load all your images first (or those you need to start with) and you can define them using array: 您可以先加载所有图像(或需要以其开头的图像),然后可以使用数组定义它们:
var imageURLs = [url1, url2, url3, ...],
images = [],
count = imageURLs.length;
Then iterate and create the image elements: 然后迭代并创建图像元素:
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);
}
and in the callback function do the inventory count: 并在回调函数中执行库存计数:
function onloadHandler() {
/// optionally: "this" contains current image just loaded
count--;
if (count === 0) callbackDone();
}
Your callback is the code you want to execute next. 回调是您接下来要执行的代码。 Your images will be in the array
images
in the same order as the imageURLs
. 您的图像将以与
imageURLs
相同的顺序出现在数组images
中。
For production you should also incorporate an onerror
handler in case something goes wrong. 对于生产,还应该合并一个
onerror
处理程序,以防出现问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.