z-index - higher z-index loads first...?

[GGMcGee]

Hi,

I'm aware that an element with a higher z-index value will position itself visually on top of an element with a lower z-index value, however I was wondering...:

When downloading, does a web page load content within an element with higher z-index before it loads content within an element with a lower z-index?

If not, is there any way to tell the browser what part of a web page to load before everything else?

May be a silly sort of question... it sounds like a stretch to me for z-indexes to do this, but I could swear I've read it before somewhere.

Was wondering because I have a website with a large-ish background image - around 300kb - and would want the text of the web page to load before the background image.

If not by this method, is doing this possible any other way?

[noTime]

I don't really know how exactly do web browsers interpret the soup of HTML tags (depends on the browser, I guess). But since images are external resources, they need separate connections. That makes it impossible to load both images and your website at the same moment.

JavaScript might help to preload those images. Put this just before the </head> tag.


<script language="JavaScript">
if(document.images) {
image1= new Image(100,100);
image1.src="http://www.example.com/image1.gif";
image2= new Image(640, 480);
image2.src="http://www.example.com/image2.gif";
}
</script>

[McGuffin]

I believe z-indexing only affects the rendering of the page visually, it shouldn't effect how the page is downloaded. You can try something like:



<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript>
$(document).ready(function() {
$("body").css("background-image", "url('myimage.jpg')");
});
</script>


Which will load the rest of the page before telling the body that it's background image is myimage. Of course, the issue with this is that the user needs javascript enabled. I've used jQuery there for simplicity, but you can attach an onload to the body tag itself and then change document.body.style.background without having to load an external library.

Not sure if you need the "url" part in setting background-image or not, either.