Разница в значении при загрузке страницы и обновлении страницы

Question

Итак, я пытаюсь прочитать высоту и ширину элементов img, созданных с помощью jquery.

Это код, я пытаюсь выполнить

$(document).ready(function() 
{ 
    $.ajax({ 
      url: 'res/script/getImage.php', 
      type: 'POST', 
      data: { 
       param : 'Load' 
      }, 
      success: function(result) 
      { 
       ImageArray = JSON.parse(result); 
       for(i=0; i<ImageArray.length; i++) 
       { 
         //Read the Image element and update to gallery 

         document.getElementById("gallery").innerHTML += ImageElement; 
         ImageArrayComplete[ImageCounter] = ImageArray[i].image; 
         UserArrayComplete[ImageCounter] = ImageArray[i].user; 

       } 

      //Create Canvas 
      $('#gallery img').each(function() { 
       console.log(this); 
       console.log('Width=' + this.width+ 'Height='+this.height); 
       createCanvas(this); 
      }); 

      } 
     }); 
}); 

Выход console.log(this); это путь к изображению, который, как ожидалось.

Но выход console.log('Width=' + this.width+ 'Height='+this.height); равен 0 для ширины и высоты при начальной загрузке страницы.

Значение обновляется до фактической ширины 200 после обновления страницы.

Нет другой ошибки, возникшей и как в Firefox, так и в Chrome. Что мне здесь не хватает?

Answer 1

Вы уверены, что img select имеет значения высоты и ширины?

Answer 2

Ваш ImageElement объект не определен. попробуйте это:

изменение

document.getElementById("gallery").innerHTML += ImageElement; 

в

$('<img/>').attr('src', ImageArray[i].image).appendTo($('#gallery')); 

и this объект не имеет height и width атрибут. если вы хотите его получить, используйте:

console.log('Width=' + $(this).width() + 'Height=' + $(this).height());