jQuery каждый слишком быстро

Question

Я пытаюсь добавить атрибут data-size моему родителю div.

Вот мой код:

var width, height; 
$(".galerie img").each(function() { 
    width = this.naturalWidth; 
    height = this.naturalHeight; 
    $(this).parent().attr('data-size', width+'x'+height); 
}); 

У меня есть около 40 изображений на 1 странице. На этом пути не каждый мой div получает «размер данных». Иногда только 1/2 из них, иногда 1/3 из них или только 5 из них. Как я могу это исправить?

Answer 1

в window.load. это потому, что не каждый изображения загружаются должным образом перед каждой функции выстреливает

$(window).on("load", function() { 
var width, height; 
    $(document).ready(function(){ 
     $(".galerie img").each(function() { 
      width = this.naturalWidth; 
      height = this.naturalHeight; 
      $(this).parent().attr('data-size', width+'x'+height); 
     }); 
    }); 
}); 

Answer 2

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

попытаться проверить его с чем-то вроде этого:

if (typeof img.naturalWidth !== "undefined" && img.naturalWidth === 0) { 

или использовать document.ready imagesLoaded javascript library.

Answer 3

Используйте new Image() и ждать его onload

var width, 
    height; 
$(".galerie img").each(function() { 
    var $that = $(this); 
    var img = new Image(); 
    img.onload = function(){ 
    width = this.naturalWidth; 
    height = this.naturalHeight; 
    $that.parent().attr('data-size', width+'x'+height); 
    }); 
    img.src = this.src; 
});