0

My background image is decently large. When my page loads, the HTML is rendered before the background image is loaded onto the page. I would like for the background image to be the first thing to be loaded on the page and then the HTML. Right now it looks weird because without the background image, the text gets pushed up and when the background image is loaded, it all gets pushed to its regular position (not too professional-looking).

Is there anyway in javascript to accomplish this?

Thanks!

urgenthelp
  • 69
  • 1
  • 3
  • possible duplicate of [Recommended Javascript Image preloader](http://stackoverflow.com/questions/3536162/recommended-javascript-image-preloader) – Jared Farrish Jul 02 '11 at 21:45
  • http://stackoverflow.com/questions/901677/the-definitive-best-way-to-preload-images-using-javascript-jquery/901699#901699 – Jared Farrish Jul 02 '11 at 21:46
  • There are many, many, many examples of image preloading (quite a few using jQuery) on StackOverflow. – Jared Farrish Jul 02 '11 at 21:47
  • 2
    "*Right now it looks weird because without the background image, the text gets pushed up and when the background image is loaded, it all gets pushed to its regular position"* Why would ***that*** happen? The background image shouldn't be affecting the position of your main text. – T.J. Crowder Jul 02 '11 at 22:01
  • well the background image isn't the background for the entire page. it's background for a certain part in the middle. so when the page is loading, all the text below it gets pushed up until the image is loaded. sorry for not being super clear – urgenthelp Jul 02 '11 at 23:28

2 Answers2

0

I think pre-loading an image is not a solution to you problem since you want the Images to load Before the HTML document is displayed to the user.

i dont have an exact solution but what i did was show a LOADING image to the user while the page loads up and then hide that loading image when the body and images are completely loaded. to do this

    <body onLoad="document.getElementById('mydiv').setAttribute('style','display:none');">
    <div id=mydiv style="position:absolute;top:0px;left:0px;width:100%;height:100%>
<center> <img src="loading.png>
</center>
</div>


    <!-- Other HTML content here -->

    </body>

This is just a rough code, hope this helps

Pheonix
  • 6,049
  • 6
  • 30
  • 48
0

You can write javascript that adds the rest of the page to the DOM once everything is loaded. It's one of the easiest things you can do with jQuery.

However, I don't see the point. As a user I don't want you to do that to me.

whoplisp
  • 2,508
  • 16
  • 19