javascriptjqueryloadjquery-masonry

Display div while page loads (all JS and HTML/CSS)

I have a load of images being pulled from Wordpress attachments and then dumped on the page using a masonry grid of sorts - all good. However, it takes a little long.

Is there any way to display a div, with some text, as the page is loading, and then display: none, after?

I have this so far:

<script type="text/javascript">
function showContent(){
//hide loading status...
document.getElementById("loading-grid-page").style.display='none';

//show content
document.getElementById("content").style.display='block';
}
</script>
</head>
<body onload="showContent()">
<script type="text/javascript">
document.write('<div id="loading-grid-page">Fetching ALL the gold...</div>');
</script>
<div id="content">
<script type="text/javascript">
//hide content
document.getElementById("content").style.display='none';
</script>

and my CSS,

#loading-grid-page {
color: #ffffff;
font: 700 11px/25px 'proxima-nova-1', 'proxima-nova-2', sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
background: #111111 url('images/ajax-loader-black.gif') no-repeat 15px center;
border-radius: 2px;
border: 1px solid #111111;
padding: 5px 30px;
text-align: center;
width: 200px;
position: fixed;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -100px;
z-index: 1000000;
}

However it throws back mixed results, sometimes it waits and all the masonry works, and sometimes it doesn't and the masonry fails and the page loads strangely.

Just wondered if there was anything else out there ;)

Thanks, R

Solution

  • I would do it this way:

    1. Load an empty page and display a loader.
      first time when you load the method just load (y) images, per example 12 will be enough. Don't load all of them.

    2. Use (JQuery) Ajax to load the content.

      Use ajax/json to connect to the server and count the number of images left( total - displayed). if (total > 0) then return links to those images as a json array.

      link to jquery's json call. link to parsing json using PHP.

    3. Hide the loader.

      Hide the div that contain the loader and add the links to the content div.

    4. Display the content.

      Here you have two options append a div, or use an existing one but this depends on the way you implemented the code, again I recommend JQuery.