0

例: http://jsfiddle.net/forgetcolor/rZSCg/3/

divがoverflow:autoに設定されている場合、そのウィンドウよりも大きな画像が含まれる可能性が高いため、プロパティを照会する前にその画像が読み込まれるのを待つ方法を見つけようとしています。私が求めているプロパティは、スクロールバーを引いた内側の幅です。以前のstackoverflowの質問（http://stackoverflow.com/questions/10692598/how-to-get-innerwidth-of-an-element-in-jquery-without-scrollbar）のおかげで、私はそれを行うテクニックを持っています、しかしこれは小さな小さな画像、またはキャッシュ内の画像でのみ機能します。大きな画像を取得すると、画像の読み込みが完了する前にクエリを実行するコードが実行されます。

私が欲しいのは、クエリを実行する前にその画像が読み込まれるのを待つ方法です。何か案は？

完全な例: http://jsfiddle.net/forgetcolor/rZSCg/3/

Javascript:

// using a random appended to the URL to simulate non-cached
// varying images
var r = Math.floor((Math.random()*100000)+1);
$('#box1').html("<img src='http://lorempixel.com/output/fashion-q-c-1920-1920-4.jpg?"+r+"' />");
var helperDiv = $('<div />');
$('#box1').append(helperDiv);
$('#iw').text("inner width is: " + helperDiv.width());
helperDiv.remove();
4

2 に答える 2

1 
   var r = Math.floor((Math.random()*100000)+1);
   var newImage = new Image()
   $(newImage).load(function(){
        $('#iw').text("inner width is: " + newImage.width);
   });
   newImage.src = 'http://lorempixel.com/output/fashion-q-c-1920-1920-4.jpg?'+r

あなたが直面している問題はもう少し複雑です。DOMからの画像には奇妙な読み込み動作があり、onloadイベントが常に発生するとは限りません。したがって、画像をdivに配置し、DOM要素がonloadを起動するのを待つことは、機能しません。

その結果、組み込みのjavascript画像オブジェクトが必要になります。（最近学んだ）このオブジェクトは両方の問題を解決することを。まず、画像ソースを設定する前に.loadリスナーを設定している限り、すべてのブラウザで毎回onloadが起動されます。ロードが発生した後、そのイメージオブジェクトであるため、高さと幅を取得するためにページに追加する必要はありません。これらのプロパティが組み込まれています。

于 2012-05-22T01:44:24.510 に答える
1

やりたいこと全部入れて

$("img").load(function(){...});
于 2012-05-22T01:26:56.603 に答える