在我的HTML画布中引用之前如何确保所有图像都已加载 [英] How to ensure images all loaded before I reference in my HTML canvas

问题描述

我想在HTML画布上绘制一些图像

I want to draw some images in on a HTML canvas with

context.drawImage(Im1 ,205,18,184,38);

为了确保它加载我需要输入这样的代码然后我不能画东西用它

In order to make sure it loads I need to put in code like this but then I cannot draw things with it

var Im1 = new Image();
Im1.src="rechnung11014page1/img/1/Im1.png";
Im1.onload = function() {
    context.drawImage(Im1 ,205,18,184,38);
}

有没有办法加载所有图像，然后执行一段代码使用多个图像？

Is there a way to load all the images and then execute a block of code using several images?

推荐答案

在javascript中有body onload方法。只需为它创建一个事件处理程序并在那里运行您的绘图代码。在加载所有页面元素后调用OnLoad。

In javascript there is the body onload method. Just create an event handler for it and run your drawing code there. OnLoad is called after all of the page elements are loaded.

当然，它还需要您直接在html体内的某处引用这些图像。如果它们不在那里，你可以轻松地创建一个隐藏的div来进行加载。

Of course, it would also require that you directly reference those images somewhere in the body of your html. If they aren't already there, you could easily create a hidden div to do the loading.

这篇关于在我的HTML画布中引用之前如何确保所有图像都已加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！