画像変更ソース属性jQueryの高さと幅の取得

Question

私は一度に1つの大きな画像が表示される非常に単純な画像ギャラリーを持っています。私は主画像の右側に大きな画像を置いて画像の近くに配置しようとしています。メイン画像が水平の場合、キャプションは右端に表示されます。主画像が垂直の場合、キャプションはDIVの右側から約30pxです。

サムネイルをクリックすると、新しい画像が作成されて読み込まれます。私は主画像のソース属性を変更し、その寸法を取得し、それに応じてキャプションを配置しようとしています。しかし、別のサイズの画像をクリックすると、前の画像の寸法だけが表示されるようです。同じ画像をもう一度クリックすると、それは機能します。ここで

はjQuery-

$("#apparatus_thumbs a").click(function() { 
      var src = $(this).attr("href"); 
      var caption = $(this).attr("title"); 
      var wrap = $("#apparatusPhoto").fadeTo("medium", 0.5); 
      var img = new Image(); 
      $(img).load(function() { 
       wrap.fadeTo('fast', 1); 
       $("#apparatusPhoto").attr('src', src); 
       var height = $("#apparatusPhoto").height(); 
       var width = $("#apparatusPhoto").width(); 
       if (height > width) { 
        $("#apparatusPhotoCaption").css('right', '150px'); 
       } else { 
        $("#apparatusPhotoCaption").css('right', '0px'); 
       } 
       if (caption != '') { 
       $("#apparatusPhotoCaption").html(caption); 
       $("#apparatusPhotoCaption").fadeIn('slow'); 
       } else { 
        $("#apparatusPhotoCaption").fadeOut('slow'); 
       } 
       console.log('image loaded'); 
      }).attr('src', src); 
      return false; 
     }); 

ある任意のアイデア？

更新 これは動作するようです。イメージを削除し、新しいイメージを追加して、望ましい結果を得ているようです。

$("#apparatus_thumbs a").click(function() { 
      var src = $(this).attr("href"); 
      var caption = $(this).attr("title"); 
      var wrap = $("#apparatusPhoto").fadeTo("medium", 0.5); 
      var img = new Image(); 
      $(img).load(function() { 
       wrap.fadeTo('fast', 1); 
       $("#apparatusPhoto").find('img').remove(); 
       $("#apparatusPhoto").append(img); 
       var height = $("#apparatusPhoto img").height(); 
       var width = $("#apparatusPhoto img").width(); 
       if (height > width) { 
        $("#apparatusPhotoCaption").css('right', '150px'); 
       } else { 
        $("#apparatusPhotoCaption").css('right', '0px'); 
       } 
       if (caption != '') { 
       $("#apparatusPhotoCaption").html(caption); 
       $("#apparatusPhotoCaption").fadeIn('slow'); 
       } else { 
        $("#apparatusPhotoCaption").fadeOut('slow'); 
       } 
       console.log('image loaded'); 
      }).attr('src', src); 
      return false; 
     }); 

Answer 1

私はあなたが何か他のものに既にロードされた値から画像.srcを変更するとき​​は確実にすべてのブラウザで起動しますかはわかりません。

新しい画像オブジェクトを作成してそのオブジェクトに新しいURLをロードし、その新しいオブジェクトのloadイベントを使用して古い画像オブジェクトを新しいものに置き換えなければならなかった。