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

我在1页上有大约40张图片。通过这种方式，并非我的每个div都获得数据大小＆＃39;。有时只有1/2，有时是1/3，或者只有5。我该如何解决？

Answer 1

在window.load中使用document.ready。这是因为并非每个图像都会在每个函数触发之前正确加载

$(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

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

Answer 3

我认为问题在于您在未加载图像时触发每个图像。也许你应该在做之前检查最后一个是否已加载

尝试用以下方法检查：

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

或imagesLoaded javascript library.

jQuery每个都太快了

3 个答案: