javascript - How to detect when the browser has finished updating the view (re-layout, apply any changed CSS) - Stack Overflow

admin管理员组

文章数量:1404624

I have code that I'd like to run that looks something like this pseudocode:

1. Apply some CSS style to some element

2. Do some other action

The issue is that I need to not do the 'other action' until after I'm certain that the browser has actually rendered the changed CSS and will be visible to the user.

Although Javascript is single threaded, and if the 'other action' blocks the Javascript from executing further, I'd think that the browser would hopefully still be able to update the view with the new CSS values set in step 1, even if Javascript itself is blocked - but that doesn't appear to be happening (the CSS changes don't show up until after step 2 - in this case a remote service call - pletes).

I have code that I'd like to run that looks something like this pseudocode:

1. Apply some CSS style to some element

2. Do some other action

The issue is that I need to not do the 'other action' until after I'm certain that the browser has actually rendered the changed CSS and will be visible to the user.

Although Javascript is single threaded, and if the 'other action' blocks the Javascript from executing further, I'd think that the browser would hopefully still be able to update the view with the new CSS values set in step 1, even if Javascript itself is blocked - but that doesn't appear to be happening (the CSS changes don't show up until after step 2 - in this case a remote service call - pletes).

• javascript
• browser
• dom-events

Share Improve this question Follow edited May 6, 2019 at 8:16 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jul 21, 2011 at 18:30 jinglesthulajinglesthula 4,58755 gold badges4747 silver badges8484 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

Adding to Grezzo's ment, you can use a JS timeout of 0 to ensure the previous line of code has finished executing. This works because it puts whatever is inside the setTimeout's closure at the very end of the internal queue of code to be run. E.g.

// Update CSS  
$('#mydiv').css({'position' : 'relative', 'top' : 0});
setTimeout(function() {
    funcToRunAfterUIUpdate()
}, 0);

I'm too n00b on StackOverflow to post a link, I think, otherwise you can read the "MASTERING THE REFRESH() METHOD" section here: http://cubiq/iscroll-4

"Here we placed the refresh call into a zero timeout, doing so we gave the browser the time to refresh itself and the new element dimensions are correctly taken. There are other ways to ensure the browser actually updated the DOM, but so far the zero-timeout has proven to be the most solid."

If you place Javascript code into the head section of your page outside of functions then that Javascript will run before the web page content is loaded. If you place Javascript code outside of functions in the body section of your web page then that Javascript will run as the page is loading (when the loading of the page reaches the code). In both of these instances the entire web page will not have been loaded - particularly if the page contains lots of images.

here you could get more information aboun page events.

http://javascript.about./library/bltut31.htm

Have two separate javascript files.... Add the css one where you want to change the css and the other one at the bottom of the page just before the body tag and this will ensure that your js is then executed at later after the page has loaded

Could you use setTimeOut() to call your remote service call function thereby giving a very small time gap for the browser to do it's rendering before doing the function that holds up the rendering?

Do you have an example? jsFiddle perhaps?

本文标签：