0

DOM の変更が完了するまで、javascript の実行を一時停止する必要があります。jquery append を使用して DOM を変更し、追加された画像の属性を使用していくつかの投稿変数を設定しています。これについて同様の質問を見てきましたが、私がやりたいことに関連しているようには見えません。コードは次のとおりです。

var newImage = new Image();
newImage.src = *src is retrieved from previous variable*;
newImage.style.display = "none";
$('body').append(newImage);


var postData = {
    height: $('img:last')[0].height,
    width: $('img:last')[0].width
};

場合によっては、追加が完了し、高さと幅の正しい値が得られますが、ほとんどの場合、DOM は完了しておらず、高さと幅が 0 になっています。DOM が変更を完了するまで JavaScript を待機させるにはどうすればよいですか? jQuery .ready をいじってみましたが、うまくいかないようです。

4

3 に答える 3

2

onloadオブジェクトにハンドラーを配置しnewImage、そのハンドラーから残りのコードを開始する必要があります。

var newImage = new Image();
newImage.style.display = "none";
newImage.onload = function(ev) {
     // put the loaded image in the DOM
     $('body').append(this);

     // extract its properties
     var postData = {
        height: this.height,
        width: this.width
     }

     // do stuff with postData here
     // ...
};
newImage.src = *src is retrieved from previous variable*;
于 2012-03-14T17:06:50.543 に答える
1

この特定のケースでは、画像がいつ読み込まれたかを知りたいだけのように見え、その時点で JavaScript を実行します。.load()onload イベント (プレーンな JavaScript) または(jQuery)でそれを行うことができます。

var postData = {};
var newImage = new Image();
newImage.style.display = "none";
newImage.onload = function() {
    postData.height = this.height;
    postData.width = this.width;
    // perhaps call some other function here that uses postData
};
newImage.src = *src is retrieved from previous variable*;
$('body').append(newImage);

.onloadハンドラーは、値を設定する前に設定する必要があります。そうしないと.src、状況によっては load イベントを見逃す可能性があります。

于 2012-03-14T17:06:35.070 に答える
0

すべてのhtmlがページで利用可能であるが画像がロードされていない場合にトリガーされるjQueryreadyイベントを使用する代わりに、内部でコードを実行できます

  $(window).load(function(){
       /* images now loaded ,run image based code*/
   })

これは起動に時間がかかるため、画像に関連しない要素/イベントに対しても準備ができているコードがある可能性があります

于 2012-03-14T17:16:23.727 に答える