Is there some promise on browser rendering success?

Question

I want to insert some html asynchronously into the page, and then execute some javascript codes correlated with the inserted DOM.

This kind of endeavour always fail because DOM rendering in the browser takes much more time than the next javascript codes to execute.

I have met with such problem before and have asked a question, but nobody answered. It's here: https://stackoverflow.com/questions/31935005/whats-going-on-with-dom-after-orientationchange-event

So, can I get a promise or attach some callback function?

Codes here:

var bubble = function bubble(type,content){
    var myScroll, temp = document.createElement('div');
    temp.innerHTML=content;
    temp.className=type==='time'?'time':'bubble '+type;
    document.getElementsByClassName('dialogue')[0].appendChild(temp);
    if(type==='reply')myScroll = new IScroll('.dlg-wrapper', { mouseWheel: true });
};

Answer 1

I don't think rendering is asynchronous, but it is triggered by a message that is only processed after the script ended.

But you said "and then execute some javascript codes correlated with the inserted DOM.". I don't see that happening in your code.

Anyway, if you use setTimeout(callback, 0) you can do the post-processing in callback. setTimeout is also controlled by that message queue, so after the code that modified the DOM is finished, the browser will first process the redraw message (because that is first in the message queue), and only then call the callback.

Answer 2

As far as I know, there is not such an event one could listen. But you can do something normally used for animation. To keep animations run smoothly at a high rate it nessesary to batch all DOM Access as FastDom.js tries to abstract away.

All in all, the weapon of choice should be requestAnimationFrame() to schuedle your DOM access to a Frame, where the browser has updated the DOM.

In your case, new IScroll(...) needs to be schuedled until querySelector('.dlg-wrapper') actually returns the desired element.