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

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

1 个答案: