javascript - 是否有 .load() 事件处理程序的替代品？

Question

我需要一种跨浏览器(当然)的方式来获取图像文件的原始尺寸。我发现的所有内容(例如 Craig Buckler 、 Jack Moore 和 Chris Coyier )似乎都需要加载图像。

不幸的是，jQuery 的 .load() 事件处理程序现已被弃用，但即使它不是 docs明确指出阻碍其实现我的目的的缺点:

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

是否有一种简单的替代方法可以替代 .load()，并且没有这些限制？或者也许是一个快速的解决方法？我不想安装整个库或插件，但显然 jQuery 已经摆在桌面上了。

Answer 1

我认为这是您所能得到的跨浏览器

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;
});