Possible Duplicate:
Loading bar while script runs
Hi, I have a page that has alot of images and was wondering if there was a way to delay the display of this images until the entire page has loaded, like a loading bar maybe, but using jQuery? Any help would be great thankyou.
Sure this is very easy to do with jQuery. Use the window.load event to determine when all the images are loaded, then show the content:
<html>
<body>
<div id="loading"></div>
<div id="container">
<img src="http://www.playirishlottery.co.uk/wp-content/uploads/image-2.jpg"/>
</div>
</body>
</html>
$(window).load(function() {
//show();
});
function show() {
$('#loading').hide();
$('#container').fadeIn();
};
setTimeout(show, 3000);
In the above example I've used setTimeout to just demonstrate. In reality your remove this and uncomment the show() in in the .load function
Fiddle: http://jsfiddle.net/xM6v9/
If you only want to display something until your page is fully load, jQuery isn't needed: http://jsfiddle.net/ErickPetru/g7D8e/.
Explanation: your page content will be inside a div with display: none and another div shows the loading message/gif.
You need to put that required JS near the </body> inside a <script>. This way that JS will run only all is loaded before it.
Well i just encountered a simular problem / issue. My page was loading real slow due to images in the homepage image carousel. The solution for me was async image loading.
You put your image tags in your page dont fill the src. but put your src inside a class tag or something. Use jquery to get all the src's and preload those images and edit the images, add the source when there loading. This will prevent the page from being blocked by the image downloads and load your page loads faster.
Take a look at http://staticvoid.info/imageLoader/
You could also try lazy loading images. (only load image inside the viewport, those outside will be loaded when scrolled to)
Just use window.onload
It's fired once everything on the page is loaded. No JQuery required.
