画像のソースを変更すると、最初のクリックで幅/高さがゼロになります

Question

サーバ上のさまざまな選択肢から画像を選択し、キャンバスをクリックすると、クリックされた場所に画像が描画されます。

問題は、最初のクリックで画像の高さと幅がゼロで、何も描画されないということです。 2回目のクリックでは、完全に機能し、別のイメージを選択して1回目のクリックが再び機能しなくなるまで、完全に機能し続けます。

画像の新しいソースを選択したときに、幅と高さが設定されているときにまだ画像が読み込まれていないことが原因であると考えられます。

ソースが文字列の例である： "サンプル/ dog.png"、 "サンプル/ ball.png"

Javascriptを：ここ

コードである

this.image_object = new Image(); 
    this.image_object.src = source; 
    this.width = this.image_object.width; 
    this.height = this.image_object.height; 

コーヒー文字：

@image_object = new Image() 
@image_object.src = source 
@width = @image_object.width 
@height = @image_object.height 

何か提案がありがとうございます。このコードは、別のボタンがクリックされたときにのみ呼び出されるため、イメージをページ読み込み時に呼び出すことはできません。

EDIT：

私もそのイメージがロードされないので、手動で設定する画像の幅/高さ「新しい画像（52,52）は、」まだ2回のクリックを取る言及したいと思います。

Answer 1

ほとんどの場合、ページが読み込まれた直後にすべての画像を読み込むことをお勧めします。

loadImages = (fxDone) -> 
    doneCount = 0 
    total = imageURLs.length 
    for imageURL in imageURLs 
     imageName = imageURL.slice(0, imageURL.lastIndexOf(".")) 
     images[imageName] = new Image() 
     images[imageName].onload = -> 
     doneCount++ 
     if doneCount == total 
      fxDone() 
     images[imageName].src = imageURL 

どこか、この関数の外に、imageURLsがよく、画像のURLのリストとして定義されるべきである：私はこのため、以下の関数を使用します。 imagesは空のマップとして初期化する必要があります。私はonloadハンドラでこれを呼び出し、関数fxDoneを渡して、ロードされているイメージに依存するものを開始します。

画像がまだ読み込まれていない場合は、もう一度クリックして読み込むこともできます。これは最初のクリックに反応するのが少し遅くなることに注意してください。次のように私はこれを行うだろう：

if @images[source]? 
    @width = @images[source].width 
    @height = @images[source].height 
else 
    @images[source] = new Image() 
    @images[source].onload = -> 
    @width = @images[source].width 
    @height = @images[source].height 
    @images[source].src = source 

これ以外では、@imagesは空のマップを初期化する必要があります。

Answer 2

はい、これは、画像が.width属性が呼び出されたときにDOMに読み込まれなかったためです。あなたがしたのはすべてソースに設定されています。そのため、ボタンがクリックされた後に動作します。幅を決定する前に、イメージをDOMにロードする必要があります。

フレームワークを使用していますか？

そうでない場合は、これが役に立ちます。 http://www.webdeveloper.com/forum/showthread.php?t=108392

Answer 3

jQueryタグがあるので、これを行うにはjQueryを使用します。確かに、問題は、画像が読み込まれるまで幅と高さがわからないということです。代わりにこれを行います：