SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    GRAPHIC DESIGNER visualkreations's Avatar
    Join Date
    Sep 2005
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is there a way i can force my background image to load before the other images?

    Is there a way i can force my site to load my main background image before it load all the small images on my site? i know in IE it seems to be fine , but in FF it load the background image at the end.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Those images referenced nearest the top of the HTML will start loading first.

    Background images since they are only referenced from the CSS will not even start to load until after the CSS has loaded.

    How quickly the images will load once they start will depend on how big they are, where they are loading from and what other files are loading at the same time.

    About the only way to make it more likely that the background will load first is to have it cached on their computer before starting to load the current page so that it is immediately available when called for.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One option - although a somewhat ugly one - might be to set the background image in a <style> definition in the head of the page, before style sheets and js files are declared. That way the background image would be the first file the browser requests from the server and if it's not too big, it has a good chance to load before the other images that are declared in the style sheets and on the page.

  4. #4
    SitePoint Enthusiast BogusRed's Avatar
    Join Date
    Dec 2008
    Location
    San Jose, CA, USA
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually you can do this with a bit of Javascript. I'm not sure if it will load as the very first thing but I use this to preload roll over images so there is not a delay when the cursor rolls over them. I'm not an expert at this type of javascript though so I'm not entirely sure how it works.
    Code:
    if(document.images){
    	myimage = new Image(422,156); // width, height
    	myimage.src = "image.jpg"; // you will need to include the full url here i think 
    }
    Try that out and see if it works.

  5. #5
    SitePoint Wizard webcosmo's Avatar
    Join Date
    Oct 2007
    Location
    Boston, MA
    Posts
    1,480
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    There are so many ways. here is another by css.

    <style type="text/css">
    .hiddenPic {display:none;}
    </style>
    <img src="poodle-puppy-Clara.jpg"
    alt="Clara at 8 weeks" title="Clara at 8 weeks"
    height="350" width="350" class="hiddenPic">

  6. #6
    SitePoint Enthusiast BogusRed's Avatar
    Join Date
    Dec 2008
    Location
    San Jose, CA, USA
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh I like that even better. When you can go css instead of javascript it is truly a time to rejoice!


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
  •