Catching IMG load completed, client side

Last post 11-20-2008 9:30 PM by A1ien51. 1 replies.

Sort Posts:

  • Catching IMG load completed, client side

    11-20-2008, 6:06 PM
    • Member
      3 point Member
    • alperdalkiran
    • Member since 11-20-2008, 10:54 PM
    • Posts 2

    Hi,

     I'm trying to catching an high resolution image loaded completely. I have a popup window with ModalPopupExtender, and I have an image in the popup panel, that is in an UpdatePanel.

     I have a button, that changes the image's ImageUrl on button's OnClick server event. Also I add "onload" client side event to Image's attributes, to try to catch the image was loaded completely.

    I tried to simulate this HTML output of async postback with UpdatePanel, and I saw that, an image html element that added in document dynamically, doesn't call onload event when loaded completely, it calls on not loaded %100, for example %70...

    I need help immediately...

     <html>
    <body>
    <script>
    function func(image){alert(image.id);}
    </script>
    <div id="c">abc</div>
    <input type="button" value="a" onclick="document.getElementById('a').src = 'http://www.ewallpapers.eu/download/14476';"/>
    <script>
    document.getElementById("c").innerHTML = '<img id="a" onload="func(this);"

    src="http://www.satimagingcorp.com/galleryimages/aster-arizona-morenci-mine.jpg">';
    </script>
    </body>
    </html>

    Filed under:
  • Re: Catching IMG load completed, client side

    11-20-2008, 9:30 PM
    Answer
    • All-Star
      20,694 point All-Star
    • A1ien51
    • Member since 05-06-2005, 2:46 PM
    • MD USA
    • Posts 3,808

    Do not demand help, you are not paying for this service! 

    Your explaination does not make sense to me and your code example needs some editing.

    You are saying that the onload is being called before it is fully displayed?

    First I would not use innerHTML to add an image to the page, I would be using

    var img = document.createElement("img");
    img.src="foo.gif";
    img.onload = function(){ alert (this.src); }
    img.onerror = function(){ alert("bad " + this.src); } 
    document.getElementById("someId").appendChild(img);

    Second, large files act funny in browsers, Sometimes they just do not work. :)

    Eric

Page 1 of 1 (2 items)