Question

我正在尝试为我的图片的onloads设置一个resize函数，这样如果图像大于用户的浏览器窗口，它会自行调整大小。当我把一个函数放在：

function resize(){
    console.log(this.width);
}

它表示0或NaN或未定义。如果我稍后在图像上运行该函数，我会得到正确的结果...如何设置一个能够访问高度和宽度属性的onload？

编辑：对不起，我们感到困惑：http://jsfiddle.net/9aDFe/

图片是谷歌在搜索“风景”下找到的图片

Answer 1

编辑在我回答之后，通过添加到问题中的详细信息，此答案无效。我将此留待此处作为参考（因为这确实解决了有效且可能发生的问题），但请注意，这不是OP描述的特定问题的解决方案。

如果您使用的是一个提供“domReady”事件的库（或者甚至在某些情况下，如果您的脚本位于页面底部），那么您的onload函数不会及时附加到图像上 - 它已经加载了。特别是如果您正在使用body.onload事件 - 在图像完全加载之前不会触发此事件。

如果你想以这种方式处理图像（通过body.onload处执行的代码），那么你可以直接访问图像 - 它已经被加载了。动态放置在页面上的后续图像将按照您的预期触发onload事件，因为它们是在事后添加的。

查看https://developer.mozilla.org/en/DOM/window.onload以了解有关该事件的更多讨论，并建议在加载过程中不同时间点火的替代方案。

Answer 2

跨浏览器解决方案是使用readystatechange和load

的组合

var image = new Image();
image.addEventListener ("readystatechange", yourImageOnloadChecker);
image.addEventListener ("load", yourImageOnloadChecker);
image.src = "path/to/your/image"; // set SRC after your events. it's an IE fix

你的图像onload checker函数应该在高度/宽度上检查isNaN或等于0，如果是，请使用setTimeout设置回调给自己。

图像onload没有正确执行？

2 个答案: