Make everything load before the page is displayed

[TerabyteS]

Is there a way (maybe javascript) to make all images preload before the page is first shown? I have a background image which is kinda heavy and only shows several seconds after the rest has loaded. Is there a way to stop that?

[turb_]

<div id="lol" style="position:absolute;left:0px;top:0px;width:100%;height:100%">lol</div>

<script>
document.onload = $('#lol').remove;
</script>

[bios_hazard]

I would use jQuery to append a css attribute when the page loads.

$(document).ready(
    function()
    {
        $(body).css("background", "url(<path/to/image.ext>)");
    }
);

From there I would just set the background initially to a solid color that doesn't clash with your layout, or you could even have a different image be there when your page loads as a smaller place holder for the bigger image :)

Hope it helps ;)

[TerabyteS]

[QUOTE=bios_hazard;22727481]I would use jQuery to append a css attribute when the page loads.

$(document).ready(
    function()
    {
        $(body).css("background", "url(<path/to/image.ext>)");
    }
);

From there I would just set the background initially to a solid color that doesn't clash with your layout, or you could even have a different image be there when your page loads as a smaller place holder for the bigger image :)

Hope it helps ;)[/QUOTE]

The background is already ok, but before the image loads is looks very empty and weird. check for yourself: [url]http://terabyte.altervista.org/[/url]

[Darkimmortal]

Use a background colour to make up for the lack of image until it loads.

I'm not sure which I hate more - preloaders or sites with black on black until a background image loads.

[streeter]

That's probably a poor end user experience if you do that :)

Can you just compress it to PNG form (Grab a half decent image editor as well so you can choose the compression level).

[Fizzadar]

Really no point loading jQuery if it's just for this.

document.getElementById( 'lol' ).style.display = 'none';

[Burning Ninja]

if you're using php, you can use an [url="http://php-programming.suite101.com/article.cfm/output_buffer_in_php"]Output Buffer[/url]

[andersonmat]

[QUOTE=Burning Ninja;22761074]if you're using php, you can use an [url="http://php-programming.suite101.com/article.cfm/output_buffer_in_php"]Output Buffer[/url][/QUOTE]

I think you missed the point of this thread.

[bios_hazard]

If you have photoshop, you can use it with "Save to web". It will SIGNIFICANTLY reduce the image filesize :)

old thread but still has hope.