[RESOLVED] showing when everythings is loaded...

**Nomistake** · 09-10-2012 02:32 PM

am i eight that this is a good way to make sure the page only show when everything is loaded? (also images etc)?
(given that #main is the div holding al the content...)

Code:

$(document).ready(function(){
	$('#main').hide();
	$(window).load(function(){
		$('#main').show();
	});
});

thanks for you <input>

S

**ZABI** · 09-11-2012 01:22 AM

no

**Nomistake** · 09-11-2012 01:59 AM

Some more info if you want

Thanks

**ZABI** · 09-12-2012 05:02 AM

actually the $(document).ready will run after the page has been loaded completely.

another way is to hide your #main is to hide it with css and then show via jQuery when document is ready.

#main {display: none;}

in your stylesheet or in you head will tell your browser to hide it even before the #main is loaded actually.

**Nomistake** · 09-12-2012 07:34 AM

$(window).load runs after $(document).ready :-)

#main {display: none;} in combination with

$(document).ready(function(){
$(window).load(function(){
$('#main').show();
});
});

should be fine...

**ZABI** · 09-12-2012 07:46 AM

actually i m talking about the events, ready event is fired after load event has done, so if you simply omit $(window).load(function() and leave it as follows, it will work fine too

$(document).ready(function(){
$('#main').show();
});

**Nomistake** · 09-12-2012 08:00 AM

ah maybe i'm mis informed, but willing to learn.
here is where i got some info:

The window load event executes a bit later (after document ready) when the complete page is fully loaded, including all frames, objects and images. Therefore functions which concern images or other page contents should be placed in the load event for the window or the content tag itself.

from http://4loc.wordpress.com/2009/04/28...vs-windowload/

**Nomistake** · 09-12-2012 08:06 AM

Originally Posted by ZABI

$(document).ready(function(){
$('#main').show();
});

would show the #main even if images are not yet loaded...

**xelawho** · 09-12-2012 09:42 AM

agree with Nomistake - it's not like it's a complicated thing to test:

Code:

<script type="text/javascript">

$(document).ready(function(){
	$(window).load(function(){
		alert("ready");//alerts after the image is loaded
	});
});
</script>

</head>
<body>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Nokota_Horses_cropped.jpg/250px-Nokota_Horses_cropped.jpg"></img>

</body>

compare to:

Code:

<script type="text/javascript">

$(document).ready(function(){
	alert("ready");//alerts before the image is loaded
});
</script>

</head>
<body>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Nokota_Horses_cropped.jpg/250px-Nokota_Horses_cropped.jpg"></img>

</body>

**maurycy** · 09-12-2012 05:51 PM

$(document).ready() is fired when DOM is ready and not all content loaded. It usefull in most cases when developer just want to manipulate DOM, window.load should be your solution

**ZABI** · 09-12-2012 11:58 PM

Great, hmm interesting... will try to find out more.

**Nomistake** · 09-13-2012 03:51 AM

Thank you all for your responses,
i thing all is clear now :-)
S

Thread: [RESOLVED] showing when everythings is loaded...

Thread Tools

Display

[RESOLVED] showing when everythings is loaded...

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions