jQuery: Detecting if browser is done rendering after 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.

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.

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().

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
  }

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

Any ideas? :-)

Thanks in advance,

snorri

回答1:

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

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

Here is one good explanation

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

来源：https://stackoverflow.com/questions/34944147/jquery-detecting-if-browser-is-done-rendering-after-append

标签

javascript

jquery