Javascript 是否有.load（）事件处理程序的替代程序？

我需要一种跨浏览器（当然）的方式来获取图像文件的原始尺寸。我发现的所有内容（例如，、和）似乎都要求已加载图像

不幸的是，jQuery的

.load（）

事件处理程序现在已被弃用，但即使它不是阻止它实现我的目的的明显缺点：

• 它在跨浏览器中无法稳定工作，也不可靠
• 如果图像src设置为与以前相同的src，则在WebKit中无法正确触发
• 它不能正确地在DOM树上冒泡
• 对于已经存在于浏览器缓存中的图像，可以停止激发

---

是否有一个没有这些限制的

.load（）

的简单替代品？或者快速解决？我不想安装一个完整的库或插件，但显然jQuery已经准备好了。

我认为这是跨浏览器的

function get_dimensions(image_element, callback) {
    var img = new Image();
    img.onload = function() {
        callback({width: this.width, height: this.height});
    }
    img.src = image_element.src;
    if (img.complete) img.onload(); // avoids caching issues
}

你可以这样称呼它

var image = document.getElementById('myImage');

var width, height;
get_dimensions(image, function(dimensions) {
    width = dimensions.width;
    height = dimensions.height;
});

---

img.onload是非常跨浏览器的，在加载之前，你无法判断某个东西有多大。如果需要的话，你可以选择自然高度而不是身高，然后等待超负荷…@dandavis，谢谢你的及时回复。与什么相同的

load（）

？尽管在你的问题中没有标记，为什么不使用服务器端的方法，比如PHP的getimagesize方法？

image.onload

，关于如何获取图像的维度有一百万个答案。jQuery只是一个库，它过去有两个

load（）

方法，一个是用ajax加载内容的，另一个是加载内容时的事件处理程序。用于图像的

load（）

没有什么问题，让两个同名的方法做不同的事情是违反直觉的，因此它被包装到

on（）

中，作为

on（'load'，handler）

，它真正做的就是调用本机javascript

元素。onload=handler

，就是这样，使用一个比另一个没有任何优势。既然img拥有与维度相同的道具，为什么不将图像传递给回调呢？@dandavis-Yup，可以做到这一点，它基本上是为了展示如何使用onload事件来获取维度，实际上并不需要所有包装材料。酷。我现在正试图让它工作，但第4行（“回调”）出现语法错误：

意外标记（

@JohnK-输入有点太快了，我实际上忘记了函数谢谢，这样更好。我添加了一些小的更正以使它工作（等待调整）.但现在，上面的函数似乎只在缓存图像时提供尺寸。如果是新加载的，则宽度和高度未定义。顺便说一句，我在OSX上使用的是Chrome 32。