PDA

View Full Version : 'page loading' addition to Dynamic Ajax Content



humblenick
12-07-2007, 06:04 PM
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
12-07-2007, 07:03 PM
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
12-09-2007, 12:30 AM
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
12-10-2007, 07:06 PM
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
12-10-2007, 08:09 PM
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
12-18-2007, 11:19 PM
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
12-19-2007, 09:44 AM
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
12-19-2007, 10:32 AM
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
12-19-2007, 11:59 AM
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
12-19-2007, 12:47 PM
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 :D

beginner2001
01-02-2008, 03:19 PM
hi,
thanks to this usefull script
ihave a BIg problem in adding coe below in demo script
else if (page_request.readyState != 4 )
document.getElementById(containerid).innerHTML="Loading...";

when i add this tow lines the page load nothing and each times i click on the left links nothing load and just show the (Choose a page to load.)

BYK
01-02-2008, 03:37 PM
You should give either the error messeage or the link to the problematic page for me to investigate ;)

PS: I prefer the link :)

bigfresh
01-13-2008, 04:51 PM
Hi--
I'm using the AJAX Pagination script (http://www.dynamicdrive.com/dynamicindex17/ajaxpaginate/index.htm)
and I would love if the images in the next and previous pages were preloaded, as per this post:


Quote:

Originally Posted by ddadmin View Post
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.

I'm using PHP so I'd be able to dynamically insert what next/prev images to load based on the current page being displayed.

Any clues? Thanks...

girish_327
03-22-2008, 01:32 PM
Hello All,
I would like to add Loading Image to below Ajax Pagination Script please help me out in this simple problem.
I did some changes in the script but that not working I think I placed code in wrong position
// JavaScript Document


var loadedobjects=""
var rootdomain="http://"+window.location.hostname

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState != 4 ){
document.getElementById(data-container).innerHTML="<img src='loading.gif' /> Loading...";
}else
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}