jQuery width() i wysokość() return 0 dla elementu img

Question

więc tworzę nowy element obrazu kiedyś dostanę odpowiedź z AJAX rozmowy z metadanych obrazu jak ta:

var loadedImageContainter = $('<div class="loaded-image-container"></div>'); 
var image = $('<img src="' + file.url + '" alt="">'); 
loadedImageContainter.append(image); 
$('.loading-image').replaceWith(loadedImageContainter); 
var width = image.width(); 
var height = image.height(); 
console.log(width); 
console.log(height); 

Ale szerokości() i wysokości() Funkcje zwracają 0, chociaż obraz ma rozmiar 30 x 30 pikseli i jest poprawnie wyświetlany na stronie. Muszę uzyskać jego wymiary, aby całkowicie ustawić obraz.

Answer 1

Należy poczekać na załadowanie obrazu, aby uzyskać dostęp do danych szerokości i wysokości.

var $img = $('<img>'); 

$img.on('load', function(){ 
    console.log($(this).width()); 
}); 

$img.attr('src', file.url); 

Albo zwykły JS:

var img = document.createElement('img'); 

img.onload = function(){ 
    console.log(this.width); 
} 

img.src = file.url; 

Ponadto, nie trzeba wstawić obraz do DOM przed odczytać wartości szerokości i wysokości, więc można zostawić aż wymianę .loading-image po obliczeniu wszystkich prawidłowych pozycji.

Answer 2

To dlatego, że obraz nie jest ładowany podczas sprawdzania szerokość

Spróbuj użyć zdarzenie obciążenia w ten sposób

$('img').on('load',function(){ 
    // check width 
}); 

Answer 3

Jeśli umieścisz go wewnątrz wywołania AJAX, że będzie działać zbyt, to jest dla metody json

$.post("URL",{someVar:someVar},function(data){ 

    var totalImgs = $('body').find('img').length; 

    var image = $('<img src="' + data.file[0].url + '" alt="" id="IMG_'+ totalImgs +'">'); 

    loadedImageContainter.append(image); 
    $('.loading-image').replaceWith(loadedImageContainter); 

    var width = $('#IMG_'+totalImgs).width(); 
    var height = $('#IMG_'+totalImgs).height(); 

},'json'); 

Answer 4

Spróbuj tego:

$('.loading-image').replaceWith(loadedImageContainter); 
$('.loading-image').load(function(){ 
    var width = image.width(); 
    var height = image.height(); 
    console.log(width); 
    console.log(height); 
}); 

Answer 5

Można również użyć alternatywnego API $.load metodę:

$('<img src="' + file.url + '" alt="">').load(function(){ <your function implementation> }); 

Answer 6

Jak @ahren said wcześniej powodem jest to, że obraz nie ładowany podczas tring dostać to rozmiary.

Jeśli chcesz to naprawić bez jQuery można użyć waniliowy JS addEventListener metoda:

document.getElementsByTagName('img')[0].addEventListener('load', function() { 
    // ... 
    var width = image.width(); 
    var height = image.height(); 
    console.log(width); 
    console.log(height); 
    // ... 
});