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

L

lawpoop

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?
 
T

tcole6

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.
 
N

nameth

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.
 
N

nameth

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.
 
T

Thomas 'PointedEars' Lahn

lawpoop said:
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
 
T

Thomas 'PointedEars' Lahn

nameth said:
[...]
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
 
N

nameth

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?
 
L

lawpoop

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.
 
T

Thomas 'PointedEars' Lahn

nameth said:
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
 
N

nameth

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

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!
 
T

Thomas 'PointedEars' Lahn

nameth said:
Come on man, I've read your past posts on here before. Not once have
your been helpful to anyone in this group. [...]

As I said, you have a severe problem with reading.


PointedEars
 
N

nameth

I probably am :)


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.





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();
}
 
M

Michael J. Ryan

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.

<div id="container" style="position:relative; width:100px; height;100px
overflow;hidden">
<loading image here id="loading1">
<long image here>
</div>

onload...("loading1").style.display="none";

basically have a container the size of your image with overflow set to hidden,
with the loading image before the long loading image... in your
window.noloadevent, hide the loading image...
 
H

Holger Suhr

lawpoop said:
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?

In my panoramaviewer I used code like this one:

<script>
function imgOK(adiv,I,src) {
adiv.innerHTML='';
adiv.appendChild(I);
if(src) newpic(src);
}
function newpic(divname,src,lsrc) {
var I=new Image();
var adiv=document.getElementById(divname);
I.onload=function(){ imgOK(adiv,I,lsrc?src:null);};
I.src=lsrc?lsrc:src;
}
</script>

------------------------------

Now you can use an empty div and newpic will automatically switch
between a loader-pic and the real pic.

<script>
function bodyonload() {
newpic('imgdiv','realimg.php','loaderimg.gif');
}
</script>
</head>
<body onload='bodyonload()'>
<div id='imgdiv'></div>
</body>

------------------------------

or you can use the loader-pic inside the div and newpic will
only switch to the real pic.

<script>
function bodyonload() {
newpic('imgdiv','realimg.php');
}
</script>
</head>
<body onload='bodyonload()'>
<div id='imgdiv'>
<img src='loaderimg.gif' alt='loading'>
</div>
</body>

-------------------------------

1. You should insert some tests which I stripped from this code
2. Your image will not be loaded without JavaScript

Holger
 
L

lawpoop

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();
    }

I think that would work, also!

But, so far, I have a single generic xml http javascript function taht
does the work for all my ajax needs on the site. To use this method, I
would create another xml http function, this one just to handle the
graph. It would be identical to my generic xml http function, except
for that single line where it changes from loading to the graph. I
think, to avoid code duplication, I should choose another route.
 
S

SAM

Le 6/17/09 6:15 PM, lawpoop a écrit :
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 do not understand.
If you have an 'onload' in the body that calls an xmlhttprequest for an
image, how that could reload once more from the moment the call succeded?

Do you really need an Ajax call to replace an image ?

<body onload="document.getElementById('graf').src='phpGraph.php'">

<img id="graf" src="wait.gif" alt="graph" title="">
 
L

lawpoop

Le 6/17/09 6:15 PM, lawpoop a écrit :



I do not understand.
If you have an 'onload' in the body that calls an xmlhttprequest for an
image, how that could reload once more from the moment the call succeded?

If it's on the img tag itself, and I it loads an image, then once the
new image is loaded, it runs the onload function again, ad infinitum.
Do you really need an Ajax call to replace an image ?

How would you do it?
<body onload="document.getElementById('graf').src='phpGraph.php'">

<img id="graf" src="wait.gif" alt="graph" title="">

Can an html document have multiple body tags? The spot where the image
is that I want to replace is within a div tag. By the time the user
gets to the slow-loading chart, we've replaced the div.innerHTML
several times. If I put a <body> tag in there, won't it conflict with
the page's main <body> tag?
 
T

Thomas 'PointedEars' Lahn

lawpoop said:
If it's on the img tag itself, and I it loads an image, then once the
new image is loaded, it runs the onload function again, ad infinitum.

Not if you remove the event listener in the event listener as I told you.
How would you do it?

He probably wouldn't, and neither would I. To begin with, while image data
can be requested from an HTTP server using XHR, it cannot be displayed
everywhere; displaying it would require support for the `data:' URI scheme.

However, if the XHR would request an image's URI from the server that were
used for setting the `src' property of an image object, or HTML code that
contained an `img' element to be used as content for another element, that
would be acceptable, although less efficient and compatible than the direct
approach.
Can an html document have multiple body tags?

An HTML document cannot have multiple BODY elements. The BODY element is
only allowed within the HTML element, and only once there.

The spot where the image is that I want to replace is within a div tag.

Irrelevant if you are referring to an image object.
By the time the user gets to the slow-loading chart, we've replaced
the div.innerHTML several times.
So?

If I put a <body> tag in there, won't it conflict with the page's
main <body> tag?

Inserting a second BODY element is certainly not what was meant.
However yes, a second BODY element would interfere, and a BODY
element within a DIV element would be not Valid.


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top