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 http://www.w3schools.com/ajax/ajax_xmlhttprequest_onreadystatechange.asp) 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.
Thanks.
So lets say my link is:
http://www.mydomain.com/helper/somepage.html?lightbox[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
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) …
HEAD:
// 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...');
};
BODY:
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. 
and report back