Получение ширины от масштабированного изображения

Question

Я использую Jquery для получения ширины изображения после его добавления к телу.Взгляните на эту скрипку , чтобы понять, что я делаю.

То, что я хочу сделать, это добавить каждый элемент с ограниченной высотой и прочитать, какова соответствующая ширина, после того, как он масштабирован.Проблема, как вы увидите, состоит в том, что console.log дает мне значение 0 для ширины.

Answer 1

Используйте функцию jQuery .load() для выполнения всех вычислений после загрузки изображения:

var number = 0;

$(document).ready(function(){
    setInterval(function(){
        console.log();
        $('.container').prepend(
          $('<img/>').attr({
           src: "http://www.upress.umn.edu/book-division/images-1/other images/blockc.gif/image_thumb"
           id:'img' + (number++)
}).load(function(){
 console.log($(this).width())
})
    },3000);
});​

Answer 2

Мохсен и Джастис правы.Тем не менее, вы все еще можете немного упростить:

var number = 0;
$(document).ready(function(){
    setInterval(function(){
        console.log();
        $('.container').prepend($('<img '
                + 'id="img'+number+'"src="http://www.upress.umn.edu/'
                + 'book-division/images-1/other-'
                + 'images/blockc.gif/image_thumb">').load(function() {
            console.log($(this).width());            
        }));
        number++;
    }, 3000);
});​

Answer 3

http://jsfiddle.net/w7rcn/

Ширина считывалась до полной загрузки изображения.

Итак, мы использовали ту же концепцию, но применили ее после того, как сработало событие img load:

 $('#img' + String(number)).load(function() {
            console.log($(this).width());
        });