Javascript renders with a delay after HTML
I have an HTML page with a couple javascript buttons that 'replace' the HTML/CSS.
However, when the page loads, there is an annoying delay between when the HTML/CSS loads and when the js 'replaces' it . (An example of what I'm talking about can be seen on the site: www.psd2html.com). What accounts for this delay and what is the best practice in terms of having the js load before a user experiences a delay (for example on F开发者_运维技巧acebook or Youtube or any other large site with lots of js). Thank you.
To avoid the delay define your replaceElement() function in <head> then use <script> tags inside <body> to call that function right after the element to be replaced is loaded:
...
<div id="to_be_replaced_1">contents or whatever</div>
<script type="text/javascript">replaceElement( 'to_be_replaced_1' );</script>
...
some other content
...
<div id="to_be_replaced_2">contents or whatever</div>
<script type="text/javascript">replaceElement( 'to_be_replaced_2' );</script>
...
Well, actually, people who answered that "it is probably better to accept it" got the point. Nevertheless, there are some approaches which can help you to reduce negative effects.
- Think twice about any UI element you want to change, to decorate, to repaint, to redraw dynamically. I mean, there must be a real reason why you are replacing something with javascript generated UI element with different layout.
- If it is not the option, if you just can't avoid replacing via javascript for some reasons, try to use some visual effect, some transition effect (is can be gained not only by css transitions, though) which give a user psychological evidence of that everything is OK, everything works as it should works. Sorta of disabled - disabled, but loading - enabled metaphor.
加载中,请稍侯......
精彩评论