Results 1 to 7 of 7

Thread: Is there a way to check loaded-ness when you change the src of an image?

  1. #1
    Join Date
    Apr 2008
    Location
    San Diego, CA
    Posts
    352
    Thanks
    57
    Thanked 6 Times in 6 Posts

    Default Is there a way to check loaded-ness when you change the src of an image?

    Hi all,

    Is there a way to change the src of an image, then delay a follow-up function from running until the new src is completely loaded?

    Any tips greatly appreciated!

  2. #2
    Join Date
    Apr 2008
    Location
    San Diego, CA
    Posts
    352
    Thanks
    57
    Thanked 6 Times in 6 Posts

    Default

    Say you have an image, like so:

    Code:
    <img id="someImage" src="/images/some-image.jpg" alt="Some Image" />
    And you change its src with JS, like so:

    Code:
    var oIMG = document.getElementById("someImage");
    oIMG.src = "/images/some-other-image.jpg";
    Is there a way to tell when the new src has completely finished loading?

  3. #3
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    No. Sorry to say, but this is the only answer to your question. Now, (this is out of the question) you can preload images, but that is probably not what you wanted...

    Anywho, no is all I know of. There may be some really complexed and expensive way (in computer terms), and of course, you probably wouldn't want to use it. Heck, I couldn't even code something like that...is this that you need/want important?

    -magicyte

  4. #4
    Join Date
    Apr 2008
    Location
    San Diego, CA
    Posts
    352
    Thanks
    57
    Thanked 6 Times in 6 Posts

    Default

    What about this?

    http://www.thefutureoftheweb.com/blo...t-being-called

    Can I wait for onload to fire for the image object, then change the existing image's src?

  5. #5
    Join Date
    Apr 2008
    Location
    San Diego, CA
    Posts
    352
    Thanks
    57
    Thanked 6 Times in 6 Posts

    Default

    Nevermind, someone on another forum gave me the solution:
    var oIMG = document.getElementById("someImage");
    oIMG.addEventListener("load", oIMGloaded, false);
    oIMG.src = "/images/some-other-image.jpg";

    function oIMGloaded() {
    alert("oIMG loaded");
    }

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    There are two ways I know of to check if an image has loaded. One is to test the complete property of the image object (most useful with preloading of the form of var myImage = new Image()), the other is to await the firing of the onload event of the image tag, which I believe may also work with image objects.

    However, the onload event of the image tag is not valid in HTML, so should be assigned via javascrpt. This must be done before setting its source.

    To answer your original question, given:

    HTML Code:
    <img src="some.gif" id="theimg">
    and:

    Code:
    function whatever (){
    do something here when the image has loaded
    }
    You could do like:

    Code:
    document.getElementById('theimg').onload = whatever;
    document.getElementById('theimg').src = 'another.gif';
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Apr 2008
    Location
    San Diego, CA
    Posts
    352
    Thanks
    57
    Thanked 6 Times in 6 Posts

    Default

    Thanks for the responses you guys.

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
  •