SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Link to stylesheet only after page has loaded

    I want to preload some images that are included as backgrounds in an external css file. In order to have all page content loaded and displayed before additional images are preloaded I thought I link to the stylesheet only once the page has loaded. Maybe you can see what I've tried to do: However, it breaks the page somehow. Resulting the page to become blank after loading.

    In the header is:
    Code:
    <script type="text/javascript">
    function preloadimgs ()
    {
    document.write('<link href="css/preload_aboutus.css" rel="stylesheet" type="text/css" ></style>');
    }
    </script>
    And then:
    Code:
    <body id="general" onload="preloadimgs()">
    What's wrong with my approach?

  2. #2
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there spirelli,
    What's wrong with my approach?
    Well, basically it is the use of document.write.

    you could try it like this...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <link id="mylink" href="#" rel="stylesheet" type="text/css" >
    
    
    <script type="text/javascript">
    window.onload=function() {
       document.getElementById('mylink').href='css/preload_aboutus.css';
     }
    </script>
    
    </head>
    <body>
    
    <div></div>
    
    </body>
    </html>
    
    coothead

  3. #3
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks, coothead.

    I've tried, however it doesn't seem to apply the style. Further down the page I have a DIV that's supposed to have some background image applied to it specified in the preload_aboutus.css.

    Code:
    <div id="preload_aboutus"></div>
    it doesn't apply the CSS with the set-up I have now. It does apply it if I link the preload_aboutus.css normally. Hmmmm... Don't know what to do here...

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    How about if you change the style definition from an id to a class, then use javascript to apply that class after the page has loaded.

    Code HTML4Strict:
    <body onload="applyClass()">

    Code Javascript:
    function applyClass() {
        document.getElementById('preload_aboutus').className = 'preload_aboutus';
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahhh, this indeed works. Many thanks!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •