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

06-17-2009

Hello! I have a page with a graph image that's dynamically generated.
It takes a while for the php script to compile the data and spit out
the graph, so what I want to do is have an ajax "loading" image as the
default image, and then call an xml http request to change the source
to the graph image.

However, I was using the onLoad() event for the image, and of course,
once my graph loaded, it would call the onLoad() event again, reload
the graph, and so on.

I could implement a check not to reload the graph once the source
image had change from the "loading" image, but there's still an
infinite loop of image checking going on, even if the page doesn't
appear to change.

I looked and w3schools says that the onLoad() event only works with
the tags <body>, <frame>, <frameset>, <iframe>, <img>, and <link> .
I'm loading this image inside of a div, my testing with the body tag
doesn't seem to work. Obviously I can't use img. I don't think I want
to use frames ( unless someone gives me a good explanation as to why I
might )

How should I design the site to get this functionality?

06-17-2009

On Jun 17, 12:15*pm, lawpoop <lawp...@gmail.com> wrote:
> Hello! I have a page with a graph image that's dynamically generated.
> It takes a while for the php script to compile the data and spit out
> the graph, so what I want to do is have an ajax "loading" image as the
> default image, and then call an xml http request to change the source
> to the graph image.
>
> However, I was using the onLoad() event for the image, and of course,
> once my graph loaded, it would call the onLoad() event again, reload
> the graph, and so on.
>
> I could implement a check not to reload the graph once the source
> image had change from the "loading" image, but there's still an
> infinite loop of image checking going on, even if the page doesn't
> appear to change.
>
> I looked and w3schools says that the onLoad() event only works with
> the tags <body>, <frame>, <frameset>, <iframe>, <img>, and <link> .
> I'm loading this image inside of a div, my testing with the body tag
> doesn't seem to work. Obviously I can't use img. I don't think I want
> to use frames ( unless someone gives me a good explanation as to why I
> might )
>
> How should I design the site to get this functionality?

Just an idea...maybe have two images. The default one and then the
eventually displayed graph.

Have the graph image display:none and onload change it to
display:block and then change the default image to display:none.

06-17-2009

On Jun 17, 11:15*am, lawpoop <lawp...@gmail.com> wrote:
> Hello! I have a page with a graph image that's dynamically generated.
> It takes a while for the php script to compile the data and spit out
> the graph, so what I want to do is have an ajax "loading" image as the
> default image, and then call an xml http request to change the source
> to the graph image.
>
> However, I was using the onLoad() event for the image, and of course,
> once my graph loaded, it would call the onLoad() event again, reload
> the graph, and so on.
>
> I could implement a check not to reload the graph once the source
> image had change from the "loading" image, but there's still an
> infinite loop of image checking going on, even if the page doesn't
> appear to change.
>
> I looked and w3schools says that the onLoad() event only works with
> the tags <body>, <frame>, <frameset>, <iframe>, <img>, and <link> .
> I'm loading this image inside of a div, my testing with the body tag
> doesn't seem to work. Obviously I can't use img. I don't think I want
> to use frames ( unless someone gives me a good explanation as to why I
> might )
>
> How should I design the site to get this functionality?

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

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.

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.

sounds like you don't have a lot of experience with xml http requests,
Take some time to learn about them and the solution for your problem
will be very clear.

06-17-2009

On Jun 17, 11:15*am, lawpoop <lawp...@gmail.com> wrote:
> Hello! I have a page with a graph image that's dynamically generated.
> It takes a while for the php script to compile the data and spit out
> the graph, so what I want to do is have an ajax "loading" image as the
> default image, and then call an xml http request to change the source
> to the graph image.
>
> However, I was using the onLoad() event for the image, and of course,
> once my graph loaded, it would call the onLoad() event again, reload
> the graph, and so on.
>
> I could implement a check not to reload the graph once the source
> image had change from the "loading" image, but there's still an
> infinite loop of image checking going on, even if the page doesn't
> appear to change.
>
> I looked and w3schools says that the onLoad() event only works with
> the tags <body>, <frame>, <frameset>, <iframe>, <img>, and <link> .
> I'm loading this image inside of a div, my testing with the body tag
> doesn't seem to work. Obviously I can't use img. I don't think I want
> to use frames ( unless someone gives me a good explanation as to why I
> might )
>
> How should I design the site to get this functionality?

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

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.

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.

sounds like you don't have a lot of experience with xml http requests,
Take some time to learn about them and the solution for your problem
will be very clear.

06-17-2009

lawpoop wrote:
> Hello! I have a page with a graph image that's dynamically generated.
> It takes a while for the php script to compile the data and spit out
> the graph, so what I want to do is have an ajax "loading" image as the
> default image, and then call an xml http request to change the source
> to the graph image.

Requests are not called, and this is not only an unreliable but also an
entirely ridiculous approach. See below.

> However, I was using the onLoad() event for the image,

There is no such thing. Maybe you mean the `load' event or the `onload'
event handler.

> and of course, once my graph loaded, it would call the onLoad() event
> again, reload the graph, and so on.

That's a know issue, particularly in Opera. Just remove the event listener
in the event listener.

> I could implement a check not to reload the graph once the source
> image had change from the "loading" image, but there's still an
> infinite loop of image checking going on, even if the page doesn't
> appear to change.

Unlikely.

> I looked and w3schools says

.... what you want to ignore. W3Schools is junk.

> that the onLoad() event only works with
> the tags <body>, <frame>, <frameset>, <iframe>, <img>, and <link> .

Like you, they do not know what they are talking about.

1. Event targets are elements, not tags. (Elements consist of tags,
and sometimes content.)

2. The (X)HTML `frame', `iframe', `img' and `link' elements do not
have an `onload' attribute. Specifying it there creates invalid
markup.

3. It depends on the DOM which elements support the `load' event,
and which DOM objects may also support the proprietary `onload'
event-handler property.

> I'm loading this image inside of a div,

Irrelevant.

> my testing with the body tag doesn't seem to work.

The `load' event of the `body' element (represented by an object that would
implement the HTMLBodyElement interface) occurs when the (X)HTML document
body has loaded. That does not necessarily include the condition that all
images have been downloaded and rendered completely. You can assume,
though, that the corresponding DOM object will be available by then.

> Obviously I can't use img.

You can, but you need to add the event listener dynamically (in the `load'
event listener of the `body' element), and it is possible that the image has
been downloaded and rendered by then. (AFAIK the only alternative is
invalid markup; even XHTML is not /that/ extensible.)

> I don't think I want to use frames

You are right on this for a change.

> How should I design the site to get this functionality?

You don't. This approach only makes sense if you are using XHR to retrieve
the information in the first place. Because, in the worst case you are
increasing the time that passes before the actual image is shown.

You can, however, use a listener for the proprietary `error' event of image
objects to replace the image with something else (that you know has a high
probability to be accessible) in case of an error. The corresponding
proprietary event-handler property is named `onerror'.

PointedEars

06-17-2009

nameth wrote:
> [...]
> 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.
>
> 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.
>
> sounds like you don't have a lot of experience with xml http requests,
> Take some time to learn about them and the solution for your problem
> will be very clear.

And what about users without present script or XHR support?
No, your suggestion would make matters only worse.

PointedEars

06-17-2009

> And what about users without present script or XHR support?
> No, your suggestion would make matters only worse.
>
> PointedEars

Okay,

First, all I was trying to do is point the OP in the right direction,
which I did. Second, i guarantee everything your put in your post
above went right over the OP's head but it made you look cool so don't
worry. Third, to your last post, it's not hard to check for XHR
support, and 99.9% of the users will be fine, Also "present script"?
wtf is that... did you make that up?

06-17-2009

On Jun 17, 1:48*pm, nameth <justin.mcgin...@gmail.com> 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.

06-17-2009

nameth wrote:
>> And what about users without present script or XHR support?
>> No, your suggestion would make matters only worse.
>> [...]
>
> Okay,
>
> First, all I was trying to do is point the OP in the right direction,
> which I did. Second, i guarantee everything your put in your post
> above went right over the OP's head but it made you look cool so don't
> worry. Third, to your last post, it's not hard to check for XHR
> support, and 99.9% of the users will be fine,

1. Wrong direction.
2. Red herring. The supposed complexity of my reply is irrelevant to
the low quality of your reply.
3. You don't know what you are talking about. There is no reliable test.
4. Percentages? "Statistics"? Rubbish, as discussed ad nauseam before.

> Also "present script"? wtf is that... did you make that up?

You need to learn how to read in context. "Without present script support"
or "without script support being present" was meant, of course.

You also need to learn how to quote properly.
<http://jibbering.com/faq/#posting>

PointedEars

06-17-2009

On Jun 17, 2:43*pm, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:
> nameth wrote:
> >> And what about users without present script or XHR support?
> >> No, your suggestion would make matters only worse.
> >> [...]
>
> > Okay,
>
> > First, all I was trying to do is point the OP in the right direction,
> > which I did. *Second, i guarantee everything your put in your post
> > above went right over the OP's head but it made you look cool so don't
> > worry. Third, to your last post, it's not hard to check for XHR
> > support, and 99.9% of the users will be fine,
>
> 1. Wrong direction.
> 2. Red herring. *The supposed complexity of my reply is irrelevant to
> * *the low quality of your reply.
> 3. You don't know what you are talking about. *There is no reliable test.
> 4. Percentages? *"Statistics"? *Rubbish, as discussed ad nauseam before.
>
> > Also "present script"? wtf is that... did you make that up?
>
> You need to learn how to read in context. *"Without present script support"
> or "without script support being present" was meant, of course.
>
> You also need to learn how to quote properly.
> <http://jibbering.com/faq/#posting>
>
> PointedEars

Come on man, I've read your past posts on here before. Not once have
your been helpful to anyone in this group. Your very arrogant and
think your always right and you love to say, learn to quote properly
and put up your cute little link, get over yourself, your not special.
so I'm going to finish helping the OP now and suggest you move along
to the next thread where you'll probably start this attitude all over
again. Have a better day!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Triple nested loop python (While loop insde of for loop inside ofwhile loop)	Isaac Won	Python	9	03-04-2013 10:08 AM
JavaScript refresh: <a href="#" onClick="window.location.reload( true );">Reload</a>	Joshua Beall	HTML	26	06-29-2007 06:31 PM
I need help writing a smart Javascript infinite loop	alxasa@gmail.com	Javascript	2	01-02-2007 06:51 AM
loop thru a STL list causes an infinite loop	Allerdyce.John@gmail.com	C++	5	01-31-2006 03:21 PM
Smart Navigation property causing infinite Page Reload (v 1.1)!?!	=?Utf-8?B?S2V3bHBhY2s=?=	ASP .Net	7	01-24-2006 05:17 PM