javascript 检测图像下载完成的最佳方法是什么 - onload 或 addEventListener()？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14885324/
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
What is the best way to detect an image download completion - onload or addEventListener()?
提问by
For detecting when an image has completed downloading which method should I use?
为了检测图像何时完成下载，我应该使用哪种方法？
image.onload = function () {}
or
或者
image.addEventListener("load", function () {} );
采纳答案by jfriend00
onload:
onload:
- Supports only a single listener.
- Works in all browsers.
- You unbind the event handler by clearing the
onloadproperty.
- 仅支持单个侦听器。
- 适用于所有浏览器。
- 您可以通过清除该
onload属性来解除绑定事件处理程序。
addEventListener:
addEventListener:
- Supports multiple listeners.
- Doesn't work in older IE browsers (they use
attachEvent). - You unbind the listener with
removeEventListener()which requires info identifying the original eventListener.
- 支持多个监听器。
- 不适用于较旧的 IE 浏览器（他们使用
attachEvent）。 - 您解除绑定
removeEventListener()需要识别原始事件侦听器的信息的侦听器。
If addEventListeneris supported and you only need one listener, then you can use either.
如果addEventListener支持并且您只需要一个侦听器，那么您可以使用其中之一。
If it's a simple self-contained piece of code that nobody else will be messing with then, there's no issue with using onload. If it's a more complex piece of software that other developers may mess with and any kind of extensibility is desired and you have cross browser support for event listeners, then addEventListener()is more flexible and is probably more desirable.
如果这是一段简单的自包含代码，其他人都不会弄乱，那么使用onload. 如果它是一个更复杂的软件，其他开发人员可能会弄乱，并且需要任何类型的可扩展性，并且您对事件侦听器有跨浏览器支持，那么addEventListener()更灵活，可能更可取。
回答by codefactor
image.addEventListener("load", function() {} );will not work on all browsers, but assuming you have a backup and use image.attachEvent("onload", function() {})
image.addEventListener("load", function() {} );不适用于所有浏览器，但假设您有备份并使用 image.attachEvent("onload", function() {})
if(image.addEventListener) { image.addEventListener("load",function() {}); }
else { image.attachEvent("onload", function() {}); }
This will have the benefit that you are not overriding any onload event that already exists on the image, and that your onload event will not be overridden by any other code.
这样做的好处是您不会覆盖图像上已存在的任何 onload 事件，并且您的 onload 事件不会被任何其他代码覆盖。
Directly modifying the "onload" attribute of a DOM Element is usually not recommended just because you may think "Hey, I can save a couple lines of code by setting it, and I only need one listener, so I'll just set it rather than using addEventListener/attachEvent" - but it invariably leads to "Well what if I need to add something else later?"
通常不推荐直接修改 DOM 元素的“onload”属性，因为你可能会想“嘿，我可以通过设置它来节省几行代码，而且我只需要一个监听器，所以我只是设置它而不是而不是使用 addEventListener/attachEvent” - 但它总是会导致“如果我稍后需要添加其他内容怎么办？”
For this reason javascript developers usually use a library to attach events, so you can add the listener confidently with one line of code and it will work in all browsers.
出于这个原因，javascript 开发人员通常使用一个库来附加事件，因此您可以使用一行代码自信地添加侦听器，并且它将在所有浏览器中工作。
回答by T.Todua
try
尝试
if(image.complete){
//....
}
回答by dd_1138
Both, Image.completeas well as image.onloaddon't seem to work in Webkit, at least the version on my mobile. They return falseinfinitely. It works in opera though, so the code may be ok.
两者Image.complete以及image.onload似乎都不适用于 Webkit，至少在我的手机上的版本中。他们false无限地返回。不过它在歌剧中工作，所以代码可能没问题。
Therefore I am currently using a trick that works at least in opera and webkit. I have a 1x1 pixel placeholder image ready. Now I set the srcto the to be loaded image and (usually a bad practice, but this is a game that cannot start without that image) I go into a loop that updates some "loading" splashscreen gfx, but basicly just checks the width of the image, whether the image.widthis bigger than 1 pixel.
因此，我目前正在使用一种至少适用于歌剧和 webkit 的技巧。我准备好了一个 1x1 像素的占位符图像。现在我将 设置src为要加载的图像（通常是一个不好的做法，但这是一个没有该图像就无法启动的游戏）我进入一个循环更新一些“加载”启动画面 gfx，但基本上只是检查宽度图像，是否image.width大于 1 像素。
Like I said, tested only with opera and webkit. I use it to load an atlas image and copy the containing tiles to individual images over a canvas. Once finished, the srcof the atlas image is set back to the 1x1 placeholder, so it can be used that way again. For complete savity, one should also wait until the placeholder is 1 pixel in width again, before reuseing it that way.
就像我说的，只用 opera 和 webkit 测试过。我使用它来加载地图集图像并将包含的图块复制到画布上的单个图像。完成后，src图集图像的 设置回 1x1 占位符，因此可以再次使用该方式。为了完整起见，还应该等到占位符的宽度再次变为 1 像素，然后再以这种方式重用它。
