4

<object>そのため、画像がしきい値の幅を超えている場合にページの中央に配置するためのくだらない JavaScript があります。また、特定のクラスがまだ手動で適用されていないことも確認します。

$('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 では調整を簡単に指定することはできません。これを可能にするために 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 では、readystate"loading"は実際のサイズを保証しません。

各テストの前に画像のクエリ文字列を変更して、キャッシュされていないことを確認してください。

自然な寸法に関する whatwg リンクは次のとおりです。

于 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 ミリ秒待機し、イメージをチェックして、現在の実行が最後に試行したときと同じ幅であるかどうかを確認します。

画像の幅が 2 つの連続したパスで同じになるとすぐに、センタリング コードを実行します。

これは配列を使用して物事を追跡するため、常に 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 に答える