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

Discussion in 'Javascript' started by lawpoop, Jun 17, 2009.

  1. lawpoop

    lawpoop Guest

    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?
    lawpoop, Jun 17, 2009
    #1
    1. Advertising

  2. lawpoop

    tcole6 Guest

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

    On Jun 17, 12:15 pm, 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.
    >
    > 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.
    tcole6, Jun 17, 2009
    #2
    1. Advertising

  3. lawpoop

    nameth Guest

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

    On Jun 17, 11:15 am, 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.
    >
    > 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.
    nameth, Jun 17, 2009
    #3
  4. lawpoop

    nameth Guest

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

    On Jun 17, 11:15 am, 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.
    >
    > 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.
    nameth, Jun 17, 2009
    #4
  5. Re: help with design - reload image on image load; avoid infiniteloop

    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
    Thomas 'PointedEars' Lahn, Jun 17, 2009
    #5
  6. Re: help with design - reload image on image load; avoid infiniteloop

    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
    Thomas 'PointedEars' Lahn, Jun 17, 2009
    #6
  7. lawpoop

    nameth Guest

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


    > 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?
    nameth, Jun 17, 2009
    #7
  8. lawpoop

    lawpoop Guest

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

    On Jun 17, 1:48 pm, nameth <> 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.
    lawpoop, Jun 17, 2009
    #8
  9. Re: help with design - reload image on image load; avoid infiniteloop

    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
    Thomas 'PointedEars' Lahn, Jun 17, 2009
    #9
  10. lawpoop

    nameth Guest

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

    On Jun 17, 2:43 pm, Thomas 'PointedEars' Lahn <>
    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!
    nameth, Jun 17, 2009
    #10
  11. Re: help with design - reload image on image load; avoid infiniteloop

    nameth wrote:
    > 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
    Thomas 'PointedEars' Lahn, Jun 17, 2009
    #11
  12. lawpoop

    nameth Guest

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

    On Jun 17, 2:27 pm, lawpoop <> wrote:
    > On Jun 17, 1:48 pm, nameth <> 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();
    }
    nameth, Jun 17, 2009
    #12
  13. Re: help with design - reload image on image load; avoid infiniteloop

    On 6/17/2009 9:15 AM, 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.


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

    --
    Michael J. Ryan - http://tracker1.info/

    .... FRA #261: A wealthy man can afford anything except a conscience.
    Michael J. Ryan, Jun 18, 2009
    #13
  14. lawpoop

    Holger Suhr Guest

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

    lawpoop schrieb:
    > 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
    Holger Suhr, Jun 18, 2009
    #14
  15. lawpoop

    lawpoop Guest

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

    On Jun 17, 4:02 pm, nameth <> wrote:

    > 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.
    lawpoop, Jun 18, 2009
    #15
  16. lawpoop

    SAM Guest

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

    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="">


    --
    sm
    SAM, Jun 20, 2009
    #16
  17. lawpoop

    lawpoop Guest

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

    On Jun 20, 10:16 am, SAM <>
    wrote:
    > 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?


    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?
    lawpoop, Jun 22, 2009
    #17
  18. Re: help with design - reload image on image load; avoid infiniteloop

    lawpoop wrote:
    > SAM wrote:
    >> 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?

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

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

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

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


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

    <http://www.w3.org/TR/REC-html40/struct/global.html#h-7.3>

    > 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
    Thomas 'PointedEars' Lahn, Jun 22, 2009
    #18
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?S2V3bHBhY2s=?=
    Replies:
    7
    Views:
    1,759
    =?Utf-8?B?S2V3bHBhY2s=?=
    Jan 24, 2006
  2. Joshua Beall
    Replies:
    26
    Views:
    220,357
    AndreiKaa
    Jun 29, 2007
  3. Replies:
    5
    Views:
    598
    benben
    Jan 31, 2006
  4. Replies:
    2
    Views:
    111
  5. Isaac Won
    Replies:
    9
    Views:
    369
    Ulrich Eckhardt
    Mar 4, 2013
Loading...

Share This Page