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.
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.
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.
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.
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.
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”>
Oh I like that even better. When you can go css instead of javascript it is truly a time to rejoice!