web page appears scattered when loading?

Question

When loading a page for the first time, the images do not show for a second (like they are invisible). The structure of the page becomes appears to be scattered. If you hit refresh, it is fine. Are there fixes that can resolve this?

Answer 1

Yes, but none of them are very simple. One of the easiest would be to hide your page in a div or something until everything is done loading.

Answer 2

This is how HTML lays things out prior to a full load. It display whats loading while its loading. When elements are loaded they may push things around to accomodate the leniency of HTML.

If you want a page to load up "properly" while its loading then look into CSS layouts.

Its displaying correctly when you hit refresh because the data is already cached on your computer and is much quicker to load.

Answer 3

If the problem is strictly with images, I believe you can use the height and width attributes of the <img> tag to tell the browser what size the images will be. This will allow it to "place" everything correctly before it's able to load all your content.

Edit: Someone else suggested CSS, and I believe that using the height and width directives from CSS will give you the same result as using the same attributes of the <img> tag, but doesn't limit you strictly to images and a will play nicer with any margin or padding directives you might use.

Answer 4

try this:

<script type="text/javascript">
window.onload = function() {
    document.body.style.display = 'none';
    document.body.style.display = 'block';
};
</script>