Question

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

Answer 1

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);
});