Show "loading" until all images are loaded, and the trigger is jquery freemasonry

Question

I am using the jquery Masonry plugin and want to hide all the content until the triggers of the plugin are fired. Freemasonry, by default, downloads all images before it starts. I want to show the "loading" of the div until the plugin is launched. I implemented a page that checks the resolution above 1024 pixels, and then displays a “loading” div when the page loads, but right now the contents of the page appear before the plugin starts.

<script> $(document).ready(function() { $('#content').show(); $('#loading').hide(); }); $(function(){ var $container = $('#container'); var width = $(window).width(); var height = $(window).height(); if ((width > 1024 )) { $container.imagesLoaded( function(){ $container.masonry({ itemSelector : '.box', columnWidth: 120, }); }); } else { //load the css styles for screen res below 1024 } }); </script> 

See a working example here.

As you can see, there is a delay between the appearance of the content and the launch of the plugin. Hope someone can help me delay the content coming up after the trigger?

Cheers - Jesse

Answer 1

Instead of placing .show() and .hide() calls inside $(document).ready() , put them inside imagesLoaded :

 $container.imagesLoaded( function(){ $('#content').show(); $('#loading').hide(); /* other stuff... */ }); 

Because document can be ready before loading images, so you see an unloaded page.

Answer 2

Freemasonry adds the “masonry” css class to the container after it finishes setting up the bricks. Just add css rules to hide the DIV.

For example, if you have

 <div id="container"> <div id="loading">Loading...</div> [items to use in the masonry layout] <div class="box">1</div> <div class="box">2</div> </div> 

then in CSS use

 #container.masonry #loading {display: none} 

and have rules that make box 's es invisible until the plugin finishes

 #container .box {position: absolute; top: -1000px; left: -1000px} 

masonry gives box 'es styles to position: absolute , top and left anyway. You will of course need to adapt this to your site.

This should make the div with the "loading" id disappear after the masonry is completed by checking the boxes.

Answer 3

pretty simple:

use the onload window

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