javascript - 获取图像宽度的最早事件

Question

我有一些 JavaScript 来居中图像和 <object>如果它们超过阈值宽度，则在页面上显示 s。它还会检查是否尚未手动应用某些类。

$('img,object').bind('load', function() {
    w = $(this).width();

    if (w > 400 && !( $(this).hasClass('inlineimage') | $(this).parent().hasClass('inlineimage') ))
        $(this).css('margin', '10px ' + (parseInt((800-w)/2)-30) +'px');
});

虽然很恐怖，但是这背后的意义本来是很理智的。 CMS 不容易指定对齐方式，开发它以允许这样做会占用其他工作的大量时间。客户端 hack 有效。

唯一的问题是 JS 会等待整个图像加载完毕。显然，这意味着在较慢的网络上，页面加载，图像开始加载，一段时间后图像卡入到位。丑。

但是浏览器似乎在开始下载 图像时就知道图像的宽度。我真的很想加入这个事件并指出这个视觉错误。

当然，如果有一种 CSS 方法可以解决这个问题，我也愿意接受。

Answer 1

在支持它的浏览器中，您可以轮询自然维度:

var interval = setInterval( function() {
    if( img.naturalWidth ) {
        clearInterval(interval);
        console.log( "Natural available: "+ (new Date - now );
        console.log( img.naturalWidth, img.naturalHeight );
    }
}, 0 );

在演示中here在未缓存的图像上，我得到:

Natural available: 782
62 71 
Loaded: 827 

因此，实际尺寸在加载事件发生前 50 毫秒可用。不幸的是，在 IE 中，就绪状态 “loading” 不能保证实际尺寸。

在每次测试之前更改图像的查询字符串以确保未缓存。

这是关于自然维度的 whatwg 链接:http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-1.html#dom-img-naturalwidth