jQuery:在 append() 之后检测浏览器是否已完成渲染 [英] jQuery: Detecting if browser is done rendering after append()

问题描述

在一个 jQuery 项目中，我在页面加载完成后使用 append() 函数向页面添加多个图像.在所有追加完成后，我需要调用一个函数来检测每个新元素的宽度和高度，以便在页面中正确对齐它们.

In a jQuery project, I am adding several images to a page after it has finished loading, using the append() function. After all the appends are done, I need to call a function that detects the width and height of each of these new elements, so I can properly align them in the page.

这在我相当慢的开发 PC 上运行良好.但是当在快速浏览器(例如 Chrome)中的快速机器上测试它时，结果是在追加完成后立即调用布局函数会导致随机的、奇怪的行为.稍有延迟，再次执行布局函数即可解决问题.我猜javascript 已完成追加新元素"与浏览器已完成显示它们"不同，因此尚无法测量它们的大小.

This is working well on my rather slow development PC. But when testing it on a fast machine in a quick browser (e.g. Chrome), it turns out that calling the layout function right after the appends are done leads to random, weird behavior. Executing the layout function again with a slight delay solves the problem. I guess "javascript is done appending the new elements" is not the same as "the browser is done displaying them", so measuring their size is not yet possible.

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

So what I need is some way to tell when the new elements are actually there, so that I can reliably detect their widths and heights. I don't think document.ready() would help in this case, since the elements are added by a function that is called in document.load().

这是我从另一个 stackoverflow 线程复制的代码(由一个叫 Pointy 的家伙，顺便感谢！)

This is the code I copied from another stackoverflow thread (by a dude named Pointy, thanks by the way!)

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
  }

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

... with the array my_pics containing the URLs of the images to load.

有什么想法吗?:-)

提前致谢，

打鼾

推荐答案

在使用 append 添加新图像后，将控件交给浏览器，以便浏览器可以更新 ui，然后调用您的布局函数.您可以使用延迟设置为 0 的 setTimeout 来做到这一点.

After adding the new images using append, yield the control to the browser so that the browser can update the ui and then invoke your layout function. You can do so my using a setTimeout with delay set to 0.

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

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

有许多 SO 线程解释了为什么它有效并且很有用.

There are many SO threads that explain why this works and is useful.

这是一个很好的解释

此外，值得一看的是 菲利普·罗伯茨 (Philip Roberts) 制作的关于浏览器事件循环的视频.

Also, worth watching is the video by Philip Roberts on browser's event loop.

这篇关于jQuery:在 append() 之后检测浏览器是否已完成渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！