Re: help with design - reload image on image load; avoid infinite loop

On Jun 17, 2:27 pm, lawpoop <lawp...@xxxxxxxxx> wrote:
On Jun 17, 1:48 pm, nameth <justin.mcgin...@xxxxxxxxx> wrote:

Hey, If i understand what you are trying to do I think you are a
little off on your approach.

I probably am :)

First, You should create a page that just returns the graph that you
need, and nothing else. This will be the page you will make your xml
http request too, From your main page.

I have that "page" -- it actually returns a png image. Let's say it's
called 'dynamic_graph_png.php'. From the time it's initially
requested, it could take anywhere from 1-5 seconds to spit out a
graph, depending on the arguments passed to it.

I have another page, let's call it 'ajaxGraph.php'. It is actually
loaded in a container div when a user clicks on a particular
navigation button or link, via xml http. It doesn't return a whole
html document with a doctype, html, body, head, etc tags -- just some
html. I believe that is the proper behavior for this situation.
Initially, I designed it to have in it somewhere "<img id='graph'
src='./dynamic_graph_png.php?arguments=arguments'>" . So after that
xml http has finished loading in its div container, the dynamic image
being called could take some 1-5 seconds to be displayed. The user
experience at that point is that the page has data, but no image, for
a few seconds.

My next step was to change the image to "<img id='graph' src='./
loading.gif'>", so the user sees that something is (supposedly)
happening, rather than a big empty blank space while
dynamic_graph_png.php creates itself. loading.gif is simply an
animated gif of a wheel turning.

Now the trick is that I want that animated gif there up until the
dynamic graph has arrived. I think the solution to have two images,
the first being loading, the second being the graph. The graph is
hidden by default. When it loads, it should become visible, and set
loading to invisible.



On your main page, Where you eventually want your graph to be, put
what ever GIF loading Image you want.

Now in the onload of the <body> tag on your main page you could call a
function that will make the xml http request back to the page that
creates the graph, When the request returns the completed status code,
swap in the returned graph where your GIF loading image is at.

I'm not sure that would work -- The problem is that the body for the
main page loads long before the user is going to request this graph.
What's going on here is that I'm replacing the innerHTML of various
div sections of the page. In other words, I don't want the graph
loading on the onload of the main page. The user navigates to it
through various xml http requests -- at least one from the main page.

Okay I think i understand what your trying to do, So if you have a
seperate page that just returns the png image of the graph couldnt you
just call a function when you get a completed status from the xhr
request to replace the source of the .gif image with png image?

xmlhttp.onreadystatechange= function() {
if (xmlhttp.readyState==4)
if (xmlhttp.status==200)
callFunctionToChangeGifSrc();
}
.

Quantcast