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

Discussion in 'JavaScript' started by mikeh0001, Sep 19, 2013.

  1. #1
    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
     
    mikeh0001, Sep 19, 2013 IP
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    540
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #2
    Hello Mike.
    As far as I know, onload event always be fired everytime your browser/ javascript sets a new .src attribute of the image element; either from cache or from files. So even if it has previously been loaded (into cache), load event can happen... again.

    I would usually test image element's .complete property (true/ false) though to know whether it is ready or not, for manipulation. This readiness means that it has been loaded into cache, but may not be completely drawn to the screen.

    Perhaps it may be best depicted with something like this, I don't know:)
    FILE --> complete status changes --> CACHE --> load event fires --> SCREEN

    Hendra
     
    hdewantara, Sep 19, 2013 IP
  3. mikeh0001

    mikeh0001 Peon

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    3
    #3
    Thanks very much for taking the time to reply, Hendra.

    I plan to do some reading about the complete evt so that I may be able use it correctly.

    Just to let you know, what I'm trying to do is, each time the user clicks on a new thumbnail in a gallery, I show the large photo and then I preload the next large photo just in case the user continues on to the next thumbnail in the series. I don't try to do anything with the preloading image object until its load evt fires. At which point I can fade it up or do something else with it. But if the user clicks on the same thumbnail twice, the large photo will have already been preloaded from the server and be available in cache. My question is, should I continue to listen for the load evt regardless of whether the photo has been cached or not? Or would it be better to try to determine if the photo is already cached, and if so, use a different method of determining when the image object is ready to be manipulated.

    Anyway, if you have any other insights I would be very pleased to hear from you.

    Thanks again!

    Mike
     
    mikeh0001, Sep 19, 2013 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Because cache may or may not even exist, and is supposed to be transparent to the user AND the developer, worrying or thinking about if it's cached or not isn't something you should be doing in your code. Write it as if cache didn't even exist, and then you have one simple codebase that handles it all.

    Remember, throwing more code at a problem is RARELY the correct answer.
     
    deathshadow, Sep 20, 2013 IP
  5. mikeh0001

    mikeh0001 Peon

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    3
    #5
    That's a good point. Thanks to both of you for taking the time to respond to my question.

    Mike
     
    mikeh0001, Sep 20, 2013 IP