jQuery/Javascript - Get Bildgröße vor Last

Question

ich eine Liste der Bilder, die als Thumbnails nach dem Upload gerendert wird. Das Problem, das ich habe, ist, dass ich die Dimensionen der vollständig hochgeladenen Bilder benötige, damit ich eine Größenanpassungsfunktion ausführen kann, wenn die Größe falsch ist.

Funktion, die die Bildliste

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); 
    }); 

} 

ich die Lösung von diesem stackoverflow Post zu benutzen versucht haben, baut, haben aber noch, um es zu arbeiten, oder es kann nur mein Code sein. Wenn Sie irgendwelche Ideen dazu haben, könnte ich die Hilfe nutzen. Derzeit wird die Warnung nicht definiert zurückgegeben.

Answer 1

Es gibt eine neuere js Methode naturalHeight oder naturalWidth genannt, die die Informationen die Sie suchen werden zurückkehren. Leider funktioniert es nicht in älteren IE-Versionen. Hier ist eine Funktion, die ich vor ein paar Monaten erstellt habe, die für Sie arbeiten könnte. Ich habe ein bisschen von Ihrem Code darunter für ein Beispiel hinzugefügt:

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)​