最早获得图像宽度的事件

时间:2012-08-09 12:19:41

标签: javascript jquery css javascript-events

因此,如果超过阈值宽度,我会在页面上使用一些糟糕的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方式接近这一点,我也会对此持开放态度。

3 个答案:

答案 0 :(得分:2)

在支持它的浏览器中,您可以轮询自然尺寸:

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

答案 1 :(得分: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();

Demo。这应该在控制台首先加载时显示宽度,然后在加载后显示宽度。只要图像没有缓存就可以了。 (如果演示对某人不起作用,请尝试将图片网址的hoo部分更改为其他任何内容)

答案 2 :(得分: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受到我之前的一些尝试的打击)并且很快(缓存的图像在500ms内弹出)。