Question

在jQuery项目中，我在使用append（）函数完成加载后向页面添加了几个图像。完成所有追加后，我需要调用一个检测每个新元素的宽度和高度的函数，这样我就可以在页面中正确对齐它们。

这在我相当慢的开发PC上运行良好。但是当在快速浏览器（例如Chrome）中在快速计算机上测试时，事实证明在完成追加之后立即调用布局功能会导致随机，奇怪的行为。稍微延迟再次执行布局功能可以解决问题。我猜“javascript已完成附加新元素”与“浏览器显示它们”不一样，因此无法测量它们的大小。

所以我需要的是一些方法来判断新元素何时实际存在，以便我可以可靠地检测它们的宽度和高度。我不认为document.ready（）在这种情况下会有所帮助，因为元素是由document.load（）中调用的函数添加的。

这是我从另一个stackoverflow线程复制的代码（由一个名叫Pointy的家伙，感谢顺便说一句！）

function called_by_document_load() {
  var promises = [];
  for (var i=0; i<my_pics.length; i++) {
    (function(url, promise) {
      var img = new Image();
      img.onload = function () {
        promise.resolve();
      };
      img.src = url;
    }) (my_pics[i]['url'], promises[i] = $.Deferred());
  }
  $.when.apply($, promises).done(function() {
    // add the new images using append()
    // when done, call my own layout function
  }

...使用包含要加载的图像的URL的数组my_pics。

有什么想法吗？： - ）

提前致谢，

snorri

Answer 1

使用append添加新图像后，将控件生成到浏览器，以便浏览器可以更新ui然后调用您的布局功能。您可以使用延迟设置为0的setTimeout来执行此操作。

$.when.apply($, promises).done(function() {
    // add the new images using append()

    setTimeout(function () {
        // when done, call my own layout function  
    }, 0);
}

有很多SO线程可以解释为什么这样做有用。

Here is one good explanation

另外，值得关注的是浏览器事件循环中的video by Philip Roberts。

jQuery：在append（）

1 个答案: