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 из них. Как я могу это исправить?

javascript jquery for-loop each

2

Trung Vu 15 Дек 2015 в 22:30

Answer 1

Используйте document.ready в 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);
        });
    });
});

3

Farhan 15 Дек 2015 в 19:38

Answer 2

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

Попробуйте проверить это примерно так:

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

Или библиотека javascript imagesLoaded.

0

Del 15 Дек 2015 в 19:38

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;
});

1

Roko C. Buljan 15 Дек 2015 в 19:42

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

3 ответа

Похожие вопросы

Новые вопросы

javascript