How to determine when the browser has finished drawing the inserted element?

Question

I have a webpage that embeds the HTML provided through AJAX. I don’t know, a priori, the size of the content, but I need to place the content on the page depending on its size. Here is a simple approach that does not work:

• Set the opacity of the parent container to 0.
• Paste the content into the DOM.
• Measure the dimensions, for example. $el.outerWidth(true) .
• Place content based on these sizes.
• Set the transparency of the parent container (back) to 1.0.

The problem with this approach is that the content is quite complex and includes images. When outerWidth() is called, the browser has not finished repainting the screen so that the returned sizes are not accurate. (Interestingly, in my case, the initial sizes are always significantly larger than the final values, and not 0, as I might expect.)

I can reduce the problem by setting a timer between steps 2 and 3, but no matter how long I take the timer, some system will probably have some kind of browser that will exceed it. And if I make the timer long enough to cover most cases, it will punish users with faster systems by introducing unnecessary delays. Although some of the answers below suggest that setTimeout(fn, 0) is sufficient, I found that it is not. I measured the drawing time to 60 ms on a MacBook Air in 2012, and one answer below offers 500 ms.

It seems that Mozilla once had an onPaint event that could solve my problem ... if it still exists, and if other browsers accepted it. (Neither one nor the other). Mutation observers do not seem to take into account drawing time when reporting changes in elements.

Decisions or comments are greatly appreciated. As noted below, this has been asked before, but most of the questions are at least a year old, and I am desperate to try again.

---

Related questions, which, unfortunately, do not give a workable answer

• How to determine when an image has finished rendering in a browser (i.e. drawn)?
• How to execute a script as soon as we find out the true height (with images) of the element loaded by ajax?
• Width of DIV right after append calculates incorrectly?
• jQuery returns a height of 0 for a div element immediately after adding an element
• Javascript: unable to get height of newly created element
• jQuery: why .width () sometimes returns 0 after inserting elements with .html ()?

---

Update: Well, it seems like this is just not a general solution to this problem. In my specific case, I found a property that will change reliably after loading the contents and layout. Poll JavaScript to change this property. Not at all elegant, but it was the best option I could find.

Answer 1

You can see if loading the window will do the trick. I am not sure if it fires more than once when new content is uploaded or not.

but for images you can use something like this.

// Call the function after image upload is complete

 function imagesLoadedEvent(selector, callback) { var This = this; this.images = $(selector); this.nrImagesToLoad = this.images.length; this.nrImagesLoaded = 0; //check if images have already been cached and loaded $.each(this.images, function (key, img) { if (img.complete) { This.nrImagesLoaded++; } if (This.nrImagesToLoad == This.nrImagesLoaded) { callback(This.images); } }); this.images.load(function (evt) { This.nrImagesLoaded++; if (This.nrImagesToLoad == This.nrImagesLoaded) { callback(This.images); } }); } $("#btn").click(function () { var c = $("#container"), evt; c.empty(); c.append("<img src='" + $("#img1").val() + "' width=94>"); c.append("<img src='" + $("#img2").val() + "' width=94>"); c.append("<img src='" + $("#img3").val() + "' width=94>"); evt = new imagesLoadedEvent("img", allImagesLoaded); }); function allImagesLoaded(imgs) { //this is called when all images are loaded //console.log("all " + imgs.length + " images loaded"); } 

js script for uploaded images