jQuery/javascript - ロード前の画像サイズを取得

Question

アップロード後にサムネイルとしてレンダリングされる画像のリストがあります。私が持っている問題は、完全にアップロードされた画像のサイズが必要なため、サイズが正しくない場合はサイズ変更機能を実行できます。

function buildEditList(json, galleryID) 
{ 
    //Hide the list 
    $sortable = $('#sortable'); 
    $sortable.hide(); 

    for(i = 0, j = json.revision_images.length; i < j; i++) { 
     $sortable.append(
      "<li id='image_" + json.revision_images[i].id + "'><a class=\"ui-lightbox\" href=\"../data/gallery/" 
      + galleryID 
      + "/images/album/" 
      + json.revision_images[i].OrgImageName 
      + "\"><img id=\"" 
      + json.revision_images[i].id 
      + "\" alt=\"\" src=\"../data/gallery/" 
      + galleryID 
      + "/images/album/" 
      + json.revision_images[i].OrgImageName 
      + "\"/></a></li>" 
     ).hide(); 
    } 
    //Set first and last li to 50% so that it fits the format 
    $('#sortable li img').first().css('width','50%'); 
    $('#sortable li img').last().css('width', '50%'); 

    //Fade images back in 
    $sortable.fadeIn("fast",function(){ 
     var img = $("#703504"); // Get my img elem -- hard coded at the moment 
     var pic_real_width, pic_real_height; 
     $("<img/>") // Make in memory copy of image to avoid css issues 
      .attr("src", $(img).attr("src")) 
      .load(function() { 
       pic_real_width = this.width; // Note: $(this).width() will not 
       pic_real_height = this.height; // work for in memory images. 
     }); 
     alert(pic_real_height); 
    }); 

} 

イメージリストを作成します

機能私はこのstackoverflowポストからソリューションを使用しようとしているが、それは仕事を得るためには至っていない、またはそれはちょうど私のコードであってもよいされています。あなたがこれに関するアイディアを持っているなら、私は助けを使うことができました。現在、アラートは未定義に戻っています。

Answer 1

あなたが探している情報を返すnaturalHeightまたはnaturalWidthという新しいjsメソッドがあります。残念ながら、それは古いIEのバージョンで動作しません。ここに私はあなたのために働くかもしれない数ヶ月後に作成された機能です。私は例の下にあなたのコードの少しを追加しました：

function getNatural($mainImage) { 
    var mainImage = $mainImage[0], 
     d = {}; 

    if (mainImage.naturalWidth === undefined) { 
     var i = new Image(); 
     i.src = mainImage.src; 
     d.oWidth = i.width; 
     d.oHeight = i.height; 
    } else { 
     d.oWidth = mainImage.naturalWidth; 
     d.oHeight = mainImage.naturalHeight; 
    } 
    return d; 
} 

var img = $("#703504"); 
var naturalDimension = getNatural(img); 
alert(naturalDimension.oWidth, naturalDimension.oHeight)​