Geek Answers Handbook

How to delay display of some HTML until javascript is loaded

When the page loads on my site, HTML appears in front of javascript, which causes flickering when loading javascript. The answer at https://stackoverflow.com/a/167666/ ... gave a great solution. But I would like to load at least some of the HTML before Javascript so that the user does not encounter a blank page during a slow connection. For example, I would like to download this header right away, but wait for the HTML to load for the enhanced javascript accordion before loading javascript. Any suggestions?

Here is the code I borrowed from the answer above:

CSS

#hideAll { position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; background-color: white; z-index: 99; /* Higher than anything else in the document */ }

HTML:

 <div style="display: none" id="hideAll">&nbsp;</div>

Javascript

  window.onload = function() { document.getElementById("hideAll").style.display = "none"; } <script type="text/javascript"> document.getElementById("hideAll").style.display = "block"; </script>
+4
source share
2 answers

I would suggest that you define the / JavaScript-based element styles that you want to render using CSS in a regular style block:

 <style type="text/css"> #javaScriptAccordion { display: none; } </style>

And then use noscript tags (in head ) to fix this in the absence of JavaScript:

 <noscript> <style type="text/css> #javaScriptAccordion { display: block; } </style> </noscript>

This ensures that the content is hidden when loading the document, preventing flash memory, but visible to those users who have JavaScript disabled.

The above has been modified to prevent a “flash without content” (as described by @ Josh3736 in his answer ), and now uses opacity to hide the content:

 <style type="text/css"> #elementToShowWithJavaScript { opacity: 0.001; width: 50%; margin: 0 auto; padding: 0.5em; border-radius: 1em 0; border: 5px solid #ccc; } </style> <noscript> <style type="text/css"> #elementToShowWithJavaScript { opacity: 1; } </style> </noscript>

Live demo .

Unfortunately, I’m not sure that I understand your question. Which leaves me to offer a solution to the question that I think you asked (all I can offer, in justification, is that he is at an early stage in the UK. And I'm not awake by choice ... sigh); if there is anything else that I am missing (or I am answering the wrong question completely), leave a comment and I will try to be more useful.

+3
source

Hacking in a related issue is, in my opinion, very bad advice. In this case, it is better to include some script immediately after your accordion elements.

 <div id="accordion">...</div> <script type="text/javascript">...</script>

However, the inline script mixed with your HTML markup is a bad idea and should be avoided as much as possible. For this reason, it’s ideal to include a built-in function call only function declared in your external script file. (When you link to an external script ( <script src="..."> ), the rendering of your page will pause until it loads.)

 <html> <head> <script type="text/javascript" src="script.js"></script> <!-- renderAccordion() defined in this file --> </head> <body> ... <div id="accordion">...</div> <script type="text/javascript">renderAccordion();</script> ... </body> </html>

Of course, the right way to do this is to simply connect to the DOM ready event from script.js and not use the inline script at all. However, this opens up the possibility of creating Flash content on extremely slow connections and / or very large documents, where loading all of the HTML itself takes several seconds. This, however, is a much cleaner approach - your script is guaranteed to be loaded before anything is displayed; the only question is how long does it take to get the DOM ready. Using jQuery in script.js :

 $(document).ready(function() { // Do whatever with your accordion here -- this is guaranteed to execute // after the DOM is completely loaded, so the fact that this script is // referenced from your document <head> does not matter. });

The clever use of <style> and <noscript> does a good job of ensuring that your accordion does not have a flash of all content; however, this method will have the opposite effect. there will be a flash without content.

When the page loads, your accordion will be completely hidden ( display:none; ), and then when your script finally executes and returns the display to block , the accordion unexpectedly materializes and presses everything below it. This may or may not be acceptable - not there will be so much movement, but still have to jump after they were originally made.

In any case, do not wait until onload makes your accordion. onload does not work until everything is turned on, including all images - fully loaded. There is no reason to wait for image downloads; you want to make your accordion as soon as possible.

0
source

More articles:


All Articles