4

因此，如果图像和 s 超过阈值宽度，我有一些糟糕的 JavaScript 将<object>它们放在页面上。它还检查某些类尚未被手动应用。

$('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 并不容易指定对齐方式，并且开发它以允许这将花费大量时间远离其他工作。客户端破解有效。

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

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

当然，如果有一种 CSS 方法可以解决这个问题，我也对此持开放态度。

4

3 回答 3

2

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

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

在未缓存图像的演示中，我得到：

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

于 2012-08-09T12:52:38.790 回答
1 
var span = document.getElementById('span'); // The parent span

var check = function (){
    if(span.offsetWidth > 0){
        console.log('Width while loading', span.offsetWidth);
    }
    else{
       setTimeout(check, 100);
    }
};
check();

​</p>

演示。这应该首先显示控制台中的宽度，然后是加载后的宽度。只要图像没有被缓存。（如果演示不适用于某人，请尝试将hoo图像 URL 的部分更改为其他任何内容）

于 2012-08-10T09:31:16.643 回答
0

为了这个仍然在最新的浏览器上工作，我拼凑了一个尽力而为的蛮力。它在两次尝试之间等待 500 毫秒并检查图像以查看当前运行的宽度是否与上次尝试的宽度相同。

只要图像的宽度在两次连续传递中相同，我们就会运行居中代码。

这使用数组来跟踪事物，因此我们不会经常强奸 DOM，也不会查询不适用的项目（因为它们已经被处理或排除）。

attempts = 0;
arr = [];
$.each($('img,object').not('inlineimage'), function(){
    arr.push([this, -2, $(this).width()]);
});

checkImgs = function() {
    attempts++;
    newarr = []
    $.each(arr, function(){
        if ($(this[0]).parent().hasClass('inlineimage'))
            return;
        w = $(this[0]).width();
        this[1] = this[2];
        this[2] = w;
        if (this[1] != this[2])
            return newarr.push(this);

        // We know this image is loaded enough now - we can do things!
        if (w >= 400)
            $(this[0]).css('margin', '10px ' + (parseInt((800-w)/2)-30) +'px');
    });

    arr = newarr;
    if (arr.length && attempts < 6)
        setTimeout(checkImgs, 500);
}
setTimeout(checkImgs, 500);

它并不漂亮，但它似乎既能有效地工作（CPU 受到我之前的一些尝试的影响）又能很快地工作（缓存的图像在 500 毫秒内就位）。

于 2012-08-09T23:58:07.433 回答