tags:

views:

135

answers:

2

Good day,

I was wondering if there is a way to make Ajax move on to the next code segment only when all the elements included in the server-side code page are fully loaded. When the retrieved data is text-only there’s no problem, but sometimes there are photos included.

This is part of the code I have been using:

xajx.onreadystatechange = function(){
  if(xajx.readyState==4){
    document.all.div1.innerHTML = xajx.responseText;
    document.all.div1.style.display = “”;
  }
}

The thing is that when the response is retrieved (readyState set to 4) and div1 is displayed, the Photo has not been completely loaded yet, so actually the user can see the process of the picture slowly appearing, as he would in any other “normal” case. What I want to do is making div1 available for display only once all the components are fully loaded while meanwhile the system does its stuff in the background. Before Ajax I used hidden iframes like everybody, so I could enclose an onload event handler within the iframe tag (or in an external script), so div1 would appear only after the iframe has fully loaded, photos included.

Any idea?

+1  A: 

You can use the 'onload' event on images themselves. You'll need to work out how to attach that event when you are downloading the code dynamically as in your case.

Andy Hume
A: 

The problem is doing it dynamically. If I could control when readyState is set to 4 it would be great, but I can’t. The server-side code is an asp file but most of its content is html, so I don’t use the response.write method but rather let html do its thing. The question is when does readyState receive the value of 4? If I included the onload event handler in the image tag, or even in the body tag of the html-asp file, would it work?

Example:

<body onload=some-empty-function()

Logically Ajax cannot consider the transference as complete without the onLoad being triggered on the server side, or am I wrong?

Isn’t there any property of Ajax which can make this easier? Tnx

readyState is 4 when all the requested data has been received. In this case the requested data is the html. The image file is requested only after you have attached the received html into dom by setting the div's innerhtml.
kkyy
yes, this is the problem. Thanks anyway, I decided to go back to iframe which in this case seems the easiest solution, and not only for this reason. Sometimes I regret having chosen to use ajax, hidden iframes were an excellent solution and always worked just fine.