为了检测图像何时完成下载，我应该使用哪种方法？
image.onload = function () {}
或
image.addEventListener("load", function () {} );
【问题讨论】：
标签： javascript
onload:
onload 属性来取消绑定事件处理程序。addEventListener:
attachEvent）。removeEventListener() 取消绑定侦听器，这需要标识原始事件侦听器的信息。如果支持addEventListener 并且您只需要一个侦听器，那么您可以使用任何一个。
如果这是一段没有其他人会弄乱的简单的自包含代码，那么使用onload 就没有问题。如果它是其他开发人员可能会弄乱的更复杂的软件，并且需要任何类型的可扩展性，并且您对事件侦听器具有跨浏览器支持，那么addEventListener() 更灵活并且可能更理想。
【讨论】：
onload 属性解除绑定更简单。
removeEventListener 也可以工作，我从来没有遇到过为图像取消绑定加载事件处理程序的理由。无论如何，我会添加这个区别。
onload 没有任何问题，特别是当您想要支持旧版 IE 浏览器并且还没有跨浏览器事件库时（比如在一个简单的独立小部件中）。当然addEventListener() 更灵活（支持多个监听器）。
image.addEventListener("load", function() {} ); 不适用于所有浏览器，但假设您有备份并使用image.attachEvent("onload", function() {})
if(image.addEventListener) { image.addEventListener("load",function() {}); }
else { image.attachEvent("onload", function() {}); }
这样做的好处是您不会覆盖图像上已经存在的任何 onload 事件，并且您的 onload 事件不会被任何其他代码覆盖。
通常不建议直接修改 DOM 元素的“onload”属性，因为你可能会想“嘿，我可以通过设置节省几行代码，而且我只需要一个监听器，所以我就设置它而不是使用 addEventListener/attachEvent” - 但它总是会导致“如果我以后需要添加其他东西怎么办？”
出于这个原因，javascript 开发人员通常使用库来附加事件，因此您可以通过一行代码自信地添加侦听器，它可以在所有浏览器中工作。
【讨论】：
试试
if(image.complete){
//....
}
【讨论】：
Image.complete 和 image.onload 似乎都不能在 Webkit 中工作，至少在我的手机上是这样。他们无限返回false。它在opera中工作，所以代码可能没问题。
因此，我目前正在使用至少在 opera 和 webkit 中有效的技巧。我准备好了一个 1x1 像素的占位符图像。现在我将src 设置为要加载的图像并且（通常是一种不好的做法，但这是一个没有该图像就无法启动的游戏）我进入一个更新一些“正在加载”的启动画面 gfx 的循环，但基本上只是检查图片的宽度，image.width是否大于1像素。
就像我说的，仅使用 opera 和 webkit 进行了测试。我使用它来加载地图集图像并将包含的图块复制到画布上的单个图像。完成后，atlas 图像的src 将设置回 1x1 占位符，因此可以再次以这种方式使用它。为了完全节省，还应该等到占位符的宽度再次达到 1 个像素，然后再以这种方式重用它。
【讨论】：
const handleImage=()=>{}
image.addEventListener("load",handleImage); //adding a eventListener
image.removeEventListener("load",handleImage); //removeing a eventListener
【讨论】：