キャッシュされたときに画像の幅がゼロになります。

Question

Javascriptライトボックスを構築していて、イメージがロードされたらサイズを調整しようとしています。私は下のコードを使用しています。これはうまくいきます - 一度読み込まれると正しい幅を出力します。

私の問題：私は更新すると

、それがキャッシュから瞬時にイメージをロードし、負荷をバイパスするようです。私は幅の瞬間ゼロを得ます。なぜこれが起こるのですか？

マイコード：**

var oImage = new Image(); 

oImage.src = 'http://mydomain.com/image.png'; 

container.html(oImage); 

oImage.onload = function(){ 

    alert(this.width); 
} 

更新* *

@Alex：これは私があなたのプラグインを試してみたコードで、私はおそらくだと仮定何か間違っている。私はあなたのプラグインがかなりよく見えるので、これを動作させることを熱望しています。

container.waitForImages(function() { 

    var cWidth = $(this).width(); 

    alert("width: "+cWidth); // returns 0 - works first time but not cached 

}); 

// Adding the image to the container for preload 

container.html('<img src="mygraphic.png" />'); 

Answer 1

あなたは.html()と.onload()通話を切り替えたいことがあります。

画像がキャッシュからロードされている場合は、私は.html()コールは、スクリプトは、画像のonloadイベントに関数ハンドラをアタッチする機会があった前に完了したことを想像しています。したがって、負荷イベント自体を効果的にバイパスすることができます（画像にはが既にロードされているため、画像はです）。

画像がまだキャッシュされていない場合は、.onloadの添付ファイルを完全に呼び出すまでに十分な時間がかかります。

あなたはそれをやっている間に、jQueryのやり方をしたいと思うかもしれません。ちょうどあなたがDOM0よりもDOM2に似たイベントを付けているようです。

var image = $('<img/>', { 
    src : 'http://mydomain.com/image.png' 
}).load(function() { 
    alert(this.width); 
}) 
// maybe clear container before if you want 
.appendTo(container); 

我々はonload後srcを設定する必要があるとしている場合は、我々としても代わりにこれを行う可能性があります：

var image = $('<img/>') 
    .load(function() { 
     alert(this.width); 
    }) 
    .attr('src','http://mydomain.com/image.png') 
    .appendTo(container) 
    ; 

きれいに動作しますうまくいけば。