modal pre loader


We have modal windows that pre-load with html content , for example ajax content. A couple with iframe content.

What I would like is a pre loader on the modal window, so modal opens up, pre loader shows, whilst content is fetched.

Whats the best way of doing this ?


for each of the technologies you mentioned there are different ways, for instance:

  • for ajax, there’s a onreadystatechange event that is triggered when the information request/response goes on between client and server; in that there are states (see where in the connection establish or processing state you can set to show the loader image or text and on request finish/response ready state you replace the loader with a “complete” message.

  • for an iframe, you select the iframe element in the document via dom selectors and then do an “onload” event check if the content in iframe has been loaded; so at the time you send a request to the iframe to load a page, set to show a loader image or text, and when “onload” is complete (i.e. content is finished loading), replace the loader with a “complete” message or something …

  • for images, you use the javascript “Image()” object. you create a new instance of the image object and specify the source of the image and it preloads it.


Ok read that.


So lets say my link is:[iframe]=true&lightbox[width]=500&lightbox[height]=470

What would I put and where, in this instance we are firing up an iframe modal.

The html of which for the modal, is actually a php file, which we rename on the fly, essentially using htaccess we rename somepage.html to somepage.php

So need a preloader for the iframe, :

Modal window fires up.
Preloader kicks in whilst content loading.
Content appears


once you click a button that you know would load up an iframe or load a new page in an existing iframe, you display the loading image/text once the button is clicked … and using iframe’s onload function, you’ll remove the loading message … for an example google for iframe onload or something as such …

as for your url, you may want to monitor changes in the url … everything after the “?” using substring and indexOf in javascript …


Absolutely over my head.

Are you saying in the

 tag on the iframe page, we add body onload function ?

If so how does a preloader work.

Is it a case of just whacking a

above main content.

Then in the css , display the loading.gif absolute center.

Then in the master div of the page, change z-index to higher than class preloader ?


yep you got it right …

to check an iframe onload, it would be something like this (you need to double check it though) …


// iframes are selected based on their "name" attribute
window.frames["test"].onload = function() {

// reset or hide loader div here
// by setting the css display property to none using whatever js library you're using

// verify if iframe onload indeed works ...
alert('iframe content finished loading...');



the code is going to be roughly, something like that …

so now with that sort of set up, say there’s a button, which you click shows your preloader div as being overlayed all over the screen or something with the loading message … and when the iframe is finished loading, inside the “onload” function the loading message is hidden … that’s all, hope it makes sense … if i had some time on me, i would’ve shown you how to do the whole thing … that’s why i can just give you pointers (that may sound a bit confusing) right now … hope it makes some sort of sense …


Thanks Daniyal, will give it a try. :slight_smile: and report back