Web Analytics Made Easy -
StatCounter Problems with display while loading page - CodingForum

Announcement

Collapse
No announcement yet.

Problems with display while loading page

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Problems with display while loading page

    Hello,
    What I am trying to achieve is not very spectacular: load an image, have it fade out, then fade in to another image, and then add text above and below the image. Everything from the moment that the page is loaded works fine. Only the text is displayed shortly while the page is loading. It quickly disappears, only to reappear again when a setTimeOut clock has stopped ticking. Its very irritating to see the text appear shortly on the screen, under different browsers, ruining the payoff, later.

    The HTML is fairly normal. The "body" tags contain:

    <body>
    <h1 id="indexh1">HOMEPAGE</h1>
    <img id="before2" src="fotos/before2.jpg" alt="before">
    <img id="after2" src="fotos/after2.jpg" alt="after">
    <p id="indexp">That's him</p>
    <ul>
    <li id="indexeli">Who are we?</li>
    </ul>
    </body>
    --------------------------------------------------------
    The CSS uses either "display: none;" or "color: black;" Both hide the text quite well:
    .hidden
    {
    display: none;
    }

    .unhidden
    {
    display: block;
    color: #ffa500;
    background-color: #000;
    font-family: Georgia, serif;
    }
    --------------------------------------------
    And the javaScript looks like this:

    addLoadListener(invisible);
    function invisible()
    {
    var header = document.getElementById("indexh1");
    header.className = "hidden";
    }
    function visible()
    {
    var header = document.getElementById("indexh1");
    header.className = "unhidden";
    }
    setTimeout(function()
    {
    visible();
    }, 6000);
    ----------------------------------------
    The link to the script is placed in the head of the HTML page.

    Any suggestion as to how to prevent the text from giving any sneek previews while the images are loading?
    -Romkebomke

  • #2
    Add the following to the stylesheet.

    #indexh1 {display:none}

    That way it doesn't have to wait for the Javascript to run to hide it.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

    Comment


    • #3
      I've considered that, but then the people who have javaScript disabled will then be out in the dark. I'd like to find something that works for both worlds, javaScript enabled and disabled. (Up to now, everything else is acceptable, even without javaScript.)

      Comment

      Working...
      X