Question

为了检测图像何时完成下载我应该使用哪种方法？

image.onload = function () {}

或

image.addEventListener("load", function () {} );

Answer 1

onload:

仅支持一个侦听器。
适用于所有浏览器。
通过清除onload属性解除对事件处理程序的绑定。

addEventListener:

支持多个侦听器。
在较旧的IE浏览器中不起作用（它们使用attachEvent）。
您使用removeEventListener()取消绑定侦听器，这需要使用标识原始eventListener的信息。

如果支持addEventListener并且您只需要一个侦听器，则可以使用其中一个。

如果它是一个简单的自包含代码片段，那么没有其他人会搞乱，那么使用onload就没有问题了。如果它是一个更复杂的软件，其他开发人员可能会搞乱，并且需要任何类型的可扩展性，并且您对事件监听器有跨浏览器支持，那么addEventListener()更灵活，可能更合适。

Answer 2

尝试

if(image.complete){
  //....
}

Answer 3

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开发人员通常使用库来附加事件，因此您可以使用一行代码自信地添加侦听器，它将适用于所有浏览器。

Answer 4

Image.complete和image.onload似乎都不适用于Webkit，至少是我手机上的版本。他们无限地返回false。它虽然在Opera中工作，但代码可能没问题。

因此我目前使用的技巧至少在opera和webkit中有效。我准备好1x1像素占位符图像。现在我将src设置为要加载的图像（通常是一个不好的练习，但这是一个没有该图像就无法启动的游戏）我进入一个循环，更新了一些＆＃34; loading＆＃34; splashscreen gfx，但基本上只检查图像的宽度，image.width是否大于1像素。

就像我说的那样，只用opera和webkit测试过。我用它来加载地图集图像并将包含的图块复制到画布上的单个图像上。完成后，地图集图像的src将被设置回1x1占位符，因此可以再次使用它。为了完全简洁，还应该等到占位符再次宽度为1个像素，然后再重复使用它。

Answer 5

const handleImage=()=>{}

image.addEventListener("load",handleImage); //添加一个事件监听器

image.removeEventListener("load",handleImage); //删除一个事件监听器

检测图像下载完成的最佳方法是什么 - onload或addEventListener（）？

5 个答案: