Show Loader Block / Image Loader whilst content is fetched

Ok not exactly ajax.

But we launch a 开发者_如何学运维modal window, which fires up straigh away. The content of the modal fetches data from our dB and takes about 3 seconds to load, on a good connection.

What I would like to do is wrap the entire content in a loader div.

I think thats the correct terminology ...

So:

< div id="main content" > blah ... blah ... blah ... < /div >

Becomes... < div class="content-loader" >

 < div id="main content" >
  blah ... blah ... blah ...
 < /div >

< /div >

I believe we have to fire an open event and a close event on success... ( I am no Js expert as you can tell )

Was reading: http://malsup.com/jquery/block/

What I dont get is, our code isnt fetching via ajax. It is via query

So how should we set this up... Not intrincily bothered if we dont have a loader.gif.

Perhaps a overlay the full size of the modal with a 50% 50% positioned Loading message..

I gather the way this works is the page somehow monitors activity, and when activity is complete the loader message disappears.

Ok so thats fine, but ... one issue I have with that is we perhaps will be yanking in images from perhaps a third party site, and so surely the loader will wait for that ping to succeed too.. or can we vary what the loader in fact is happy with ... ie just html, etc etc

Any examples would be great cheers

If you don't mind using a plugin for this, you might have a look at jquery-loading, which makes this whole process as easy as:

$.loading({
    onAjax: true,
    align: 'center',
    img: 'jquery-loading/loading.gif',
    mask: true
});

This assumes that you're using the standard jQuery AJAX functions ($.ajax(), $.get(), etc), which you claim you aren't. I'm a little confused by how you're loading the query in the modal window if not by AJAX (an iframe, maybe?), but if you need to, you can drop the onAjax:true parameter and manually call $.loading() to start the overlay + spinner and then call $.loading(false) when your content is fully loaded. In this case you'll need some way to execute a callback function when the content is loaded, either by listening for a 'load' event or by having the returned HTML call the function for you.

Edit: The easiest way to close the loading animation if you're using an iframe is to attach the callback to the iframe's load event with jQuery:

$('#my_iframe').load(function() { 
    $.loading(false);
});

Ok I managed it in the end, and thought I would share the code.This pertains to our usage only, and so you would need to amend the css according to your page.

Ok CSS:

#loading-container {position: absolute; top:50%; left:50%;}
#loading-content {width:600px; text-align:center; margin-left: -300px; height:50px; margin-top:-25px; line-height: 50px;}
#loading-content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
#loading-graphic {margin-left: 280px; margin-bottom:-2px;}
#loading {background-color: #eeeeee; height:100%; width:100%; overflow:hidden; position: absolute; left: 0; top: 0; z-index: 99999;}

Just below < body > tag I added:

<div id="loading"> 

    <script type = "text/javascript"> 
        document.write("<div id='loading-container'><p id='loading-content'>" +
                       "<img id='loading-graphic' width='16' height='16' src='images/ajax-loader.gif' /> " +
                       "Loading...</p></div>");
    </script> 

</div> 

And just above < / body > tag I added:

<!-- LOADING SCRIPT -->
<script>
$(window).load(function(){
    $("#loading").fadeOut(function(){
        $(this).remove();
        $('body').removeAttr('style');
    });
});
</script>
<!-- LOADING SCRIPT -->

Obviously we use jquery library so load yours aswell. Path to image loading.gif will vary dependant on your site.

Hope this helps anyone looking for a simple page loader graphic whilst content loads.

Ste