'page loading' addition to Dynamic Ajax Content

[humblenick]

1) Script Title:
Dynamic Ajax Content

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...jaxcontent.htm

3) Describe problem:

I'd like a little spinning gif to show to indicate that the external page is loading... It must be REALLY easy, but i'm stuck. any help much appreciated

thanks

[BYK]

You can insert the following lines to the 43rd row(just before the end of the loadpage function) and change the "Loading..." part whatever you want.

else if (page_request.readyState != 4 )
document.getElementById(containerid).innerHTML="Loading...";

Or you can simply use the loadDynamicContent function of the library below and change the "loadingText" global variable for your needs.
http://dynamicdrive.com/forums/showthread.php?t=27139

The library mentioned above DOES NOT include a function like "loadobjs" as this script has and I intend to add one

[humblenick]

awesome- many thanks

option a) seems easier to me for this particular project (option b will get used in the next one!)

cheers again

[humblenick]

this seems to 'preload' the page itself but not the jpgs in it. Is it possible to get the spinner to stay on screen untill the page and all it's elements are loaded?

thnx
n

[BYK]

Hmm, with a bit work I think the answer is yes. But the question is, is that, THAT crucial? Because you have to scan through all the possible elements which the reponse contains and assign them an "onload" event as far as I know

[humblenick]

its not that its THAT crucial.. it's just that i'm developing a small piece of brochureware for a friend on a v limited budget. I'm not getting paid loads, so I'm looking to learn from the experience and to get assets for future projects.

The pages are mostly code light, but some are quite image heavy, so it slighly defeats the object if the user sees a small spinning gif while the page loads and then has to wait for a 200k jpg to load progressively..

see what i mean? thanks v much in advance

[ddadmin]

this seems to 'preload' the page itself but not the jpgs in it. Is it possible to get the spinner to stay on screen untill the page and all it's elements are loaded?

thnx
n

Not based on the above changes, no. Basically the "loading" text that gets shown will be erased as soon as Ajax has successfully fetched the requested page. Then it is overwritten by the new page contents; any images on this new page will take their time to load thereafter.

About the only way to ensure large images on an external page fetched via Ajax appears instantaneously is to preload them on the main page itself, before an Ajax request is even made to fetch the external page. The disadvantage of this is that the images will be preloaded even if the external page is never requested by the user. You can preload images by adding something like the below to the top of your main page:

<script type="text/javascript">

//populate below array with images to preload
var preimages=['image1.gif', 'dir/image2.gif', 'http://mysite.com/image3.gif']

for (var i=0; i<preimages.length; i++){
var preload=new Image()
preload.src=preimages[i]
}

</script>

[BYK]

About the only way to ensure large images on an external page fetched via Ajax appears instantaneously is to preload them on the main page itself, before an Ajax request is even made to fetch the external page.

I strongly disagree. After you insert the content to the page, the images will be accessible via document object's subobjects. So you can scan them all and connect a simple function to their onload events. This function may decrease a global variable which holds the total number of images. And checks if it is zero. When it gets zero, this means all the images are loaded and you show the content.

This can be achieved with a "display:none", "real" content area and a "Loading" area which turns on and off via the display css property again.

You should simply scan through the all sub img elements of the "real" content area after the load is fnished.

[ddadmin]

Actually BYK, I agree with you, and there are obviously other ways as well. What I was really trying to drive home is the mechanism behind:

else if (page_request.readyState != 4 )
document.getElementById(containerid).innerHTML="Loading...";

and how it merely act as a prelude to the Ajax page itself being fetched, and cannot be molded to continue displaying, say, when the page is fetched, but not all of the images on it have yet.

[BYK]

This was a quick&dirty solution for what humblenick requested. (Actually not that dirty but not the best ) In the library I suggested(and I wrote ) I put customizable callback function assignments. If a user wants to override the default action for loading and loading-finished actions, he/she can give a custom function as the parameter.

So with that, the way I explained above can be possible I think Actually I'll try to write a script for that now