16

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

image.onload = function () {}

或者

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

5 回答 5

16

onload:

  1. 仅支持单个侦听器。
  2. 适用于所有浏览器。
  3. onload您可以通过清除该属性来取消绑定事件处理程序。

addEventListener:

  1. 支持多个监听器。
  2. 不适用于较旧的 IE 浏览器（它们使用attachEvent）。
  3. 您取消绑定removeEventListener()需要标识原始事件侦听器的信息的侦听器。

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

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

于 2013-02-14T22:35:30.880 回答
2

image.addEventListener("load", function() {} );不适用于所有浏览器，但假设您有备份并使用image.attachEvent("onload", function() {})

if(image.addEventListener) { image.addEventListener("load",function() {}); }
else { image.attachEvent("onload", function() {}); }

这样做的好处是您不会覆盖图像上已经存在的任何 onload 事件，并且您的 onload 事件不会被任何其他代码覆盖。

通常不建议直接修改 DOM Element 的“onload”属性，因为你可能会想“嘿，我可以通过设置节省几行代码，而且我只需要一个侦听器，所以我只是设置它而不是而不是使用 addEventListener/attachEvent”——但它总是会导致“如果我以后需要添加其他东西怎么办？”

出于这个原因，javascript 开发人员通常使用库来附加事件，因此您可以用一行代码自信地添加侦听器，它可以在所有浏览器中工作。

于 2013-02-14T22:43:06.990 回答
2

尝试

if(image.complete){
  //....
}
于 2015-09-24T14:55:27.200 回答
1

两者，Image.complete以及image.onload似乎在 Webkit 中都不起作用，至少在我的手机上是这样。他们false无限返回。虽然它在歌剧中工作，所以代码可能没问题。

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

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

于 2017-09-20T10:08:59.847 回答
0 
const handleImage=()=>{}
image.addEventListener("load",handleImage);  //adding a eventListener
image.removeEventListener("load",handleImage);  //removeing a eventListener
于 2021-05-03T17:12:28.750 回答