SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru
    Join Date
    Mar 2004
    Posts
    639
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image doesn't load when innerHTML changed

    Hello guys,

    I'm trying to write function that will display some text and image by changing innerHTML of div element.

    The function is:

    function showWaitImage(){
    document.getElementById('image').innerHTML = "<span class='style'>Uploading photo, please wait...<img src='http://www.example.com/img/wait.gif' id='waitImage' width='32' heght='32' /></span>";
    }
    When I run this function, I see message and broken image in FireFox. I checked code and image URL like ten times, it should work, but it doesn't.

    How can I fix this?

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    height is spelled incorrectly.
    Apart from that, it's hard to tell without more context.

  3. #3
    SitePoint Guru
    Join Date
    Mar 2004
    Posts
    639
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r51 View Post
    height is spelled incorrectly.
    Apart from that, it's hard to tell without more context.
    Thanks. I've changed to height. But I used single <img> tag before (without width and height), then I rewrite whole tag few times. It didn't work and it doesn't work now.

    About more context. The div element is in HTML body:

    <div id="image"></div>
    I call showWaitImage() function by this:

    <input value="Upload" type="submit" class="style" name="photoSubmit" id="photoSubmit" onClick="showWaitImage();">
    showWaitImage() function is in <head></head>

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your code worked okay for me with a different image. Try changing the image used to another you know exists. If that works then it's the image address that's the problem.

  5. #5
    SitePoint Guru
    Join Date
    Mar 2004
    Posts
    639
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r51 View Post
    Your code worked okay for me with a different image. Try changing the image used to another you know exists. If that works then it's the image address that's the problem.
    URL is correct. I've tried another image. Still doesn't work.

  6. #6
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function showWaitImage() {
    var div = document.getElementById("image");
    var sp = document.createElement("span");
    var im = document.createElement("img");
    im.src = "http://...";
    sp.appendChild(document.createTextNode("Uploading..."));
    sp.appendChild(im);
    div.appendChild(sp);
    }
    Try something like the above.
    If it still doesn't work, your URL is dodgy.

  7. #7
    SitePoint Guru
    Join Date
    Mar 2004
    Posts
    639
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please check PM.

  8. #8
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know this is an old post and u must have found ur way out by now, but just updating the post for future followers who,like me ,came upon this post.

    I think the problem is that, ur tryin got set the image right before a form submit.The form once submitted doesnt allow new server requests (even an image file).Even though u were settin the innerHTML before the submit,the javascript engine doesnt wait for the image to actually load before going to the submit().And the submit locks the page.So u neither get an image broken error or get to see the image.
    Solutions:
    1. Prefetching the image when the page loads.
    2. set the innerhtml when the page loads and hide the div, and toggle the display/visiblitiy property when u submit.

    Hope this helps..

  9. #9
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This works, but needs an image at example.com. I have set it to run on page load for this example.

    <html>

    <head>
    <style type="text/css">
    <!--
    body { font-family:arial; color:#000; background-color:#FFF; }
    .style2 { font-size:13px; font-weight:bold; color:#F00; }
    -->
    </style>
    <script type="text/javascript">
    <!--
    // runs on page load in this example
    // needs image at www.example.com
    function showWaitImage()
    { var build='<p><span class="style2">Uploading photo, please wait... <\/span>\n';
    build+='<img src="http://www.example.com/img/wait.gif" id="waitImage" width="32" heght="32"><\/p>\n';
    document.getElementById("image2").innerHTML=build;
    }
    //-->
    </script>
    </head>

    <body onload="showWaitImage()">

    <div id="image2">
    </div>
    <!-- end image2 div -->

    </body>

    </html>

  10. #10
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @AllanP,
    I see your example, i think the original poster had issues because he was trying to load an image right before a form SUBMIT.

    Thanks anyways


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •