jQuery/javascript - Nhận kích thước hình ảnh trước khi tải

Question

Tôi có danh sách hình ảnh được hiển thị dưới dạng hình thu nhỏ sau khi tải lên. Vấn đề mà tôi có là tôi cần kích thước của hình ảnh được tải lên đầy đủ, để tôi có thể chạy chức năng thay đổi kích thước nếu kích thước không chính xác.

Chức năng này sẽ xây dựng danh sách hình ảnh

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

} 

Tôi đã cố gắng sử dụng các giải pháp từ stackoverflow bài này, nhưng vẫn chưa nhận được nó để làm việc, hoặc nó có thể chỉ là mã của tôi. nếu bạn có bất kỳ ý tưởng về điều này tôi có thể sử dụng sự giúp đỡ. Hiện tại, cảnh báo đang trở lại không xác định.

Answer 1

Có phương thức js mới hơn được gọi là naturalHeight hoặc naturalWidth sẽ trả về thông tin bạn đang tìm kiếm. Thật không may nó sẽ không hoạt động trong các phiên bản IE cũ hơn. Đây là một chức năng tôi đã tạo ra một vài tháng trở lại có thể làm việc cho bạn. Tôi đã thêm một chút mã của bạn bên dưới mã cho ví dụ:

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