flicker - How to delay the display of some HTML until after javascript has loaded - Stack Overflow

admin管理员组

文章数量:1334887

When a page loads on my site, the HTML appears before the javascript, which leads to a flicker when the javascript loads. The answer to this stackoverflow post gave a great solution. But I would like to load at least some of the HTML before the Javascript so that the user is not faced with a blank page during a slow connection. For example, I would like to load the header immediately, but wait to load the HTML for the javascript enhanced accordion until after the javascript loads. Any suggestions?

Here's the code that I borrowed from the answer linked 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> 

When a page loads on my site, the HTML appears before the javascript, which leads to a flicker when the javascript loads. The answer to this stackoverflow post gave a great solution. But I would like to load at least some of the HTML before the Javascript so that the user is not faced with a blank page during a slow connection. For example, I would like to load the header immediately, but wait to load the HTML for the javascript enhanced accordion until after the javascript loads. Any suggestions?

Here's the code that I borrowed from the answer linked 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> 

• javascript
• flicker

Share Improve this question Follow edited May 23, 2017 at 11:47 CommunityBot 111 silver badge asked May 25, 2011 at 3:18 KenKen 3,1411212 gold badges4646 silver badges7272 bronze badges 2

• so what's wrong with using onload? it will run your script when the page is loaded – Ibu Commented May 25, 2011 at 4:23
• @Ibu: onload doesn't fire until everything --including images--have loaded. This could be a very long delay on a slow connection. The appropriate event to use for this kind of document manipulation is DOM ready. – josh3736 Commented May 25, 2011 at 4:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I'd suggest that you define the base/JavaScript-enabled styles of elements you want to display with CSS in the regular style block:

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

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

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

This ensures that the content is hidden on document load, preventing the flash, but visible to those users that have JavaScript disabled.

The above has been amended to prevent the 'flash of no 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.

I'm not, unfortunately, entirely sure that I understand your question. Which leaves me proposing a solution for the question I think you asked (all I can offer, in excuse, is that it's early in the UK. And I'm not awake by choice...sigh); if there is anything further that I'm missing (or I'm answering the wrong question entirely) please leave a ment, and I'll try to be more useful.

The hack in the linked question is—in my opinion—very poor advice. In this case, it is a better idea to include some script directly following your accordion elements.

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

However, inline script intermingled with your HTML markup is a Bad Idea and should be avoided as much as possible. For that reason, it is ideal to include inline only a function call to a function declared in your external script file. (When you reference an external script (<script src="...">), the rendering of your page will pause until it has loaded.)

<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 correct way to do this is to just attach to the DOM ready event from script.js and not use any inline script at all. This does, however, open up the possibility of a content flash on extremely slow connections and/or very large documents where downloading all of the HTML itself takes several seconds. It is, however, a much cleaner approach – your script is guaranteed to be loaded before anything is rendered; the only question is how long it takes for 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 pletely loaded, so the fact that this script is
    // referenced from your document's <head> does not matter.
});

Clever use of <style> and <noscript> does a a good job of guaranteeing that there is no flash of all the content in your accordion; however, with that method there will be the opposite effect – there will be a flash of no content.

As the page loads, your accordion will be pletely hidden (display:none;), then once your script finally executes and sets display back to block, the accordion will suddenly materialize and push down everything below it. This may or may not be acceptable – there won't be as much movement, but things will still have to jump after they've initially rendered.

At any rate, don't wait until onload to render your accordion. onload doesn't fire until everything—including all images— have fully loaded. There's no reason to wait for images to load; you want to render your accordion as soon as possible.

本文标签： flickerHow to delay the display of some HTML until after javascript has loadedStack Overflow