Display 'loading' until all images have loaded and jquery Masonry triggers

Question

I am using the jquery Masonry plugin and looking to hide all content until after the plugin triggers. Masonry by default loads all images before it triggers. I want to display a 'loading' div until the plugin has triggered. I have implemented a page that checks the resolution is above 1024px, then displays a 'loading' div as the page loads but right now page content appears before the plugin triggers.

<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 working example here.

As you can see there is a delay between the content appearing and the plugin triggering. Hoping someone can help me delay the content appearing unit after trigger?

Cheers - Jesse

`$(document).ready(function() {` and `$(function(){` are exactly the same. Unlike pure javascript onLoad, both will execute. They are executed on first loaded, firt run basis, and basically append stuff to the onLoad event. I invite you to read [this stackoverflow question](http://stackoverflow.com/questions/5263385/jquery-multiple-document-ready) for more info. — roselan, Sep 18 '11 at 10:18

score 8 · Answer 1 · answered Nov 08 '11 at 04:54

Masonry 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 the CSS use

#container.masonry #loading {display: none}

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

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

masonry will give it inline styles to the box'es for position: absolute, top and left anyway. You will, of course, have to tailor this to your own site.

That should make the DIV with id "loading" to disappear after masonry is done setting up the box'es.

This has the wow factor when you first realize it works. But it kind of sucks that your content is hidden forever if masonry fails for any reason, or even if js is off completely. — squarecandy, Apr 24 '16 at 07:02
@squarecandy True, but that is the case for many things JavaScript. Which can probably be dealt with things like capability checkers. For example set a root class like `nojs` set in HTML, that gets removed by JavaScript. And only hide the content if that class is not present. — frozenkoi, Apr 24 '16 at 07:14

score 5 · Accepted Answer · answered Sep 18 '11 at 09:41

5

Rather than placing your .show() and .hide() calls inside $(document).ready(), put them inside imagesLoaded:

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

Because the document might be ready before the images have loaded, so you see an incompletely loaded page.

answered Sep 18 '11 at 09:41

Alex

9,313
1
39
44

if I understand the request correctly, show and hide should go **after** /* other stuff */. (Possibly even after the function, and not inside, if nothing asynchronous inside, like ajax or set timeout). – roselan Sep 18 '11 at 10:11
It definitely belongs inside the function, other wise the `show` and `hide` methods will be called before the images have loaded, showing a page without all the images present. The `imageLoaded` method is essentially setting up a callback saying "once all images inside `$container` have loaded, call this function". You could place the `.show()` and `.hide()` methods after the other stuff though, worth trying out. – Alex Sep 18 '11 at 10:18
I did look at the plugin, and it does precisely that. so yes it will work inside the function :) – roselan Sep 18 '11 at 10:32
Thanks Alex and others - exactly what I was looking for. – Jesse Sep 18 '11 at 11:48
Great! You can click the check underneath the up/down vote arrows if the above has answered your question. – Alex Sep 18 '11 at 11:50
why are people using imagesloaded instead of $(document).load ?" – light24bulbs Jan 05 '15 at 20:58
1

@light24bulbs `imagesLoaded` is a method of the [jQuery masonry](http://masonry.desandro.com/appendix.html#imagesloaded) plugin. It adds the method to `jQuery` objects. The callback is called by jQuery masonary, whereas the callback passed to `$(document).load` is called by jQuery itself. – Alex Jan 10 '15 at 21:19
Oh thank you! I thought it was a third party lib for some reason. It seems to wait until HTML5 video elements are done loading also, I think. I wish it didn't though. Need to test that more to confirm. – light24bulbs Jan 12 '15 at 11:06

score 4 · Answer 3 · answered Sep 18 '11 at 09:38

4

pretty simple :

use the window onload

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

answered Sep 18 '11 at 09:38

Royi Namir

144,742
138
468
792

I don't know why someone down-voted you, but my problem was fixed by using the jQuery `$(window).load(function(){}` Thanks! – meewog Jul 19 '13 at 04:47
5

@MehrdadDastgir there're alot of kids here who has quick finger on the downvote without even knowing waht they downvote about. – Royi Namir Jul 19 '13 at 07:03

Display 'loading' until all images have loaded and jquery Masonry triggers

3 Answers3