javascript 为什么图像在加载时不显示，但在刷新时显示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7029535/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why doesn't image show on load, but shows on refresh?
提问by John Kraft
I'm playing with the canvas element in HTML5 and I have noticed a peculiar behavior. On initial load, an image I'm displaying does not show. However, when I refresh the browser, it displays appropriately. I've used IE9 and Chrome. Both behave identically. The JavaScript code looks like this:
我正在使用 HTML5 中的 canvas 元素，我注意到了一种特殊的行为。在初始加载时，我正在显示的图像没有显示。但是，当我刷新浏览器时，它会正确显示。我用过 IE9 和 Chrome。两者的行为相同。JavaScript 代码如下所示：
window.onload = load;
function load() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillRect(0, 0, 640, 400);
var image = new Image();
image.src = "Images/smiley.png";
context.drawImage(image, 50, 50);
}
The rectangle draws correctly both times, it's the smiley that only shows on a browser refresh.
矩形两次都正确绘制，它是仅在浏览器刷新时显示的笑脸。
I'm in the process of learning HTML5 and JavaScript. I'm sure I'm just doing something stupid, but I can't figure it out.
我正在学习 HTML5 和 JavaScript。我确定我只是在做一些愚蠢的事情，但我无法弄清楚。
回答by pimvdb
Images load asynchronously, so only after refresh it loads early enough because it's cached. Normally it isn't loaded yet at the time you call drawImage. Use onload:
图像是异步加载的，因此只有在刷新后它才能足够早地加载，因为它已被缓存。通常它在您调用时尚未加载drawImage。使用onload：
var image = new Image();
image.src = "Images/smiley.png";
image.onload = function() {
context.drawImage(image, 50, 50);
};
回答by Jacob
This happened with me as well (only for IE9 for me) anyways, i found a simple solution.
无论如何，这也发生在我身上（仅适用于我的 IE9），我找到了一个简单的解决方案。
Set the background of the canvas to the initial image you wish to display.
将画布的背景设置为您希望显示的初始图像。
var canvas = document.getElementById("canvas");
canvas.style.background="url('image.png')";
That should work!
那应该有效！
回答by stslavik
Actually, even just using image.onload = function() {}, you can still run into problems. Do use this technique (that's not at all what I'm saying), but move it to the bottom of your page.
实际上，即使只是使用image.onload = function() {}，您仍然会遇到问题。一定要使用这种技术（这根本不是我说的），但将它移到页面底部。
As an example, I have a social networking site that uses canvas to show the profile photo (URI stored to the DB), and print it to canvas, then overlay a logo.
例如，我有一个社交网站，它使用画布来显示个人资料照片（存储到数据库的 URI），并将其打印到画布上，然后覆盖一个徽标。
<section id="content">
<article id="personalbox" >
<h2>Hi! My name is {profile_name}</h2>
<a id="friendbutton" href=""><img src="views/default/images/friend.png" width="12" height="12" /><span>Add {profile_name} as a friend?</span></a>
<video id="profilevideo" width="240" height="144">DEBUG: Video is not supported.</video>
<canvas id="profilecanvas" width="240" height="144" >DEBUG: Canvas is not supported.</canvas>
<a id="gallerytextlink" href="gallery.html" >Click to visit {profile_name} Gallery</a>
<table id="profileinfotable1">
...
...
</section>
<script type="text/javascript">
function init() {
var cvs = document.getElementById("profilecanvas");
var ctx = cvs.getContext("2d");
var img = new Image();
img.src = "uploads/profile/{profile_photo}";
img.onload = function() {
// Ignore. I was playing with the photo.
ctx.drawImage(img, 42, 32, 186, 130, cvs.width/2 - (186-42)/2, cvs.height/2 - (130-32)/2, 186-42, 130-32);
drawLogo(cvs,ctx);
}
}
function drawLogo(cvs,ctx) {
var logo = "Enter Logo Here.";
ctx.fillStyle = "rgba(36,36,36,0.6)";
ctx.strokeStyle = "rgba(255,255,255,0.3)";
ctx.font = "bold italic 6pt Serif";
ctx.textAlign = "left";
ctx.textBaseline = "middle" ;
ctx.save();
ctx.strokeText(logo, 4, cvs.height-11);
ctx.strokeText(logo, 6, cvs.height-11);
ctx.strokeText(logo, 4, cvs.height-9);
ctx.strokeText(logo, 6, cvs.height-9);
ctx.fillText(logo, 5, cvs.height-10);
ctx.restore();
}
window.onload = init;
</script>
Ideally, this would go all the way at the bottom before the end </body>tag, but I put it up higher because of my template system. Apparently, this gives the image time to load after the canvas element has been drawn to the screen and is ready to receive input.
理想情况下，这将一直在结束</body>标记之前的底部，但由于我的模板系统，我把它放得更高。显然，这使图像有时间在画布元素被绘制到屏幕并准备好接收输入后加载。
I can't rely on setting the background of the canvas, and I have no desire to contend with refreshes. For whatever reason, just including the script with img.onload = function() {}was not enough. Move it lower, and save yourself the headaches.
我不能依赖设置画布的背景，我也不想与刷新抗衡。无论出于何种原因，仅包含脚本img.onload = function() {}是不够的。将它移低，省去头疼的麻烦。
