Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Добавление изображений append'ом (https://javascript.ru/forum/misc/41620-dobavlenie-izobrazhenijj-append%27om.html)

Yzgramor 22.09.2013 15:06

Добавление изображений append'ом
 
Добрый день!
Не вычисляются ширина и длина изображений, добавленных при помощи append. Подробнее. Есть двумерный массив images с адресами изображений. Дальше при помощи append эти изображения вставляются в div с id='fotki0':

var count=0;
        for (var i = 0; i < images.length; ++i)
                   {
                        
                        for (var l = 0; l < images[i].length; ++l)
                        {
                           
                        $('#fotki0').append($('<img />').attr({'src': images[i][l], 'id':count}));
                       count++;
                        }
                  }


Дальше мне, к примеру, нужно извлечь ширину, скажем, картинки с id=4:

wid=$('#4').width();
        alert(wid);


Этот алерт всегда будет выводить 0. Причем сначала запускается этот нулевой алерт, а потом уже, только после нажатия "ок" или "отмена", выполняется код с вставкой изображений, хотя хронологически в коде он находится раньше. Почему так происходит?

P.S. Я попробовал вместо изображений с такими-то адресами, выводить аналогично сами эти адреса:
var count=0;
        for (var i = 0; i < images.length; ++i)
                   {
                        
                        for (var l = 0; l < images[i].length; ++l)
                        {
                           
                        $('#fotki0').append('<div id="' + count + '">' +images[i][l]+ '</div>');
                       count++;
                        }
                  }


В этом случае ширина нужного мне уже дива с текстом вычисляется правильно.

ruslan_mart 22.09.2013 15:38

Потому что изображение ещё не загружено.

var images = [['1.jpg', '2.jpg'], ['10.jpg', '11.jpg']],
     count = 0,
     elem = document.getElementById('fotki0'),
     j, img;

for(var i=0; i<images.length; i++) for(j=0; j<images[i].length; j++) {
   img = new Image();
   img.alt = '';
   img.id = count;
   img.onload = function() {
      alert( this.width );
   }
   img.src = images[i][j];
   elem.appendChild(img);
}

Yzgramor 22.09.2013 23:24

А почему тогда текстовые дивы к моменту обращения к их ширине уже загрузились? Более того, я ради эксперимента аппендом подгружал 10 000 дивов просто с номерами и вызывал ширину одного из последних - так алерт пару секунд ждал загрузки и потом выводил полученную величину. Почему в случае с подгрузкой изображений alert точно так же не ждет?
Извините за глупые вопросы, но я пока новичок и многого не понимаю(

Яростный Меч 23.09.2013 03:20

Цитата:

Сообщение от Yzgramor
А почему тогда текстовые дивы к моменту обращения к их ширине уже загрузились?

потому что там нечего "загружать", всё есть на месте.
а в картинках реально подгружаются данные - байты изображения.


Часовой пояс GMT +3, время: 11:15.