#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    8
    Rep Power
    0

    How to tell when an image is ready for manipulation w/ js.


    I'm wondering if there is some way to tell when an image object is available for manipulation w/ js. I know I can use the load event to tell me when the image has finished loading from the server, but what if my page gets the image from browser cache? Will the load event be fired in that case as well? Is there a different js property that would indicate when a page resource of some kind is present in the dom and ready to be targeted w/ js?

    Thanks for any help you may have for me.

    Mike
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,041
    Rep Power
    119
    One way to do this; would be to use jQuery and use the .ready() API. Another way..., would be to check the DOM readyState() of the image.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    8
    Rep Power
    0
    Thanks, I'll look up the dom readyState() method. I haven't heard about it before. Also, I thought the .ready api was only used with the document object. Is there a ready handler for image objects as well?

    Thanks again.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    22
    Rep Power
    0
    you can use jQuery to catch onLoad event but if that's all you need to do then you don't need extra javascript library to do that.

    First, even with jQuery, in order to trigger event on an image load, you need to create an image dynamically (from Javascript).

    Edit: You can add onload event in HTML tag - see below the post

    This is how to do in pure Javascript code
    Code:
    var myImage = new Image();
    myImage.onload = function() {
            alert("The image is now ready and ready to render");
    };
    myImage.src = "IMAGE_URL_HERE";
    
    //attach the image to DOM
    document.getElementById("SOME_ID").appendChild(myImage);

    Or in HTML tag

    Code:
    <img src="IMAGE_URL" onload="imageReady()">
    and in Javascript
    Code:
    function imageReady() {
         alert("the image is ready now");
    }
    The difference between adding image in JS vs in DOM, in DOM, the image will render in screen at the same time onload is triggered. However in JS, you have more control over how and when you want the image to be rendered. FYI, this is also same technique as preloading images.

    For example, you can move the attaching to DOM code inside of onload event will render after image is fully downloaded.
    It is also good technique for loading big size image.
    Code:
    var myImage = new Image();
    myImage.onload = function() {
            alert("The image is now ready and ready to render");
           //attach the image to DOM
         document.getElementById("SOME_ID").appendChild(myImage);
    };
    myImage.src = "IMAGE_URL_HERE";
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    8
    Rep Power
    0
    Thanks very much.

    Mike

IMN logo majestic logo threadwatch logo seochat tools logo