jQuery each 太快了答案

【问题标题】：jQuery each is too fastjQuery each 太快了
【发布时间】：2016-03-21 17:58:31
【问题描述】：

我正在尝试将属性 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 张图片。这样，并非我的每个 div 都获得“数据大小”。有时只有其中的 1/2，有时只有 1/3 或只有 5 个。我该如何解决？

【问题讨论】：

你在 document.ready 中使用这个，意味着你在等到 DOM 准备好
@Farhan 我在 $(function() { ... });
如果您认为$.each 速度很快，您应该看到for 循环
@SterlingArcher 如何使用 for 选择所有“.galerie img”？
尝试在 $(window).on("load", function() {}) 中使用 $(function(){}; 这是因为我认为不是每个图像都在每个图像之前完全加载() 运行。检查这个stackoverflow.com/questions/544993/…

标签： javascript jquery for-loop each

【解决方案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);
        });
    });
});

【讨论】：

window onload 不能保证所有图片都加载完毕
@RokoC.Buljan 我已经看到了你的答案，对我来说看起来还不错。我在我的一个项目中使用了我的答案代码，它在那里也做得很好。但你的回答更合乎逻辑。
更多参考stackoverflow.com/questions/544993/…

【解决方案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;
});

【讨论】：

【解决方案3】：

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

尝试用这样的方式检查它：

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

或imagesLoaded javascript library.

【讨论】：