5

Explanation

For reasons which I appreciate, as of jQuery 1.8, the load event has been deprecated, however, it was still possible to detect whether an image was loaded (even if it was in the cache) just by using certain workarounds. Therefore, the deprecation of the event is actually quite irritating as it posed as a starting point at the very least for detecting when an image has finished loading onto the page.

Nevertheless, it has been deprecated, and I am therefore asking this question with the hope that I will find an answer, thus, help me and potentially others that may soon be running into the same issue.

An Example (before jQuery 1.8)

Without using a plugin (as this should be able to be done in very little code, so a plugin is unnecessary), I would like to call a function when each image on my page is loaded.

Something like this (this will not work due to the deprecation):

$('#mn_content .column').on('load','img',function(){
    console.log('loaded');  
})

My Question

Is anybody aware of how to achieve this now that the load event does not exist?

Please note: If the only way to achieve this (now), is to use the Javascript new Image objects, then please do not waste your time helping me as others need your help more than I do. I am able to write this code, it just seems a bit long winded for something so basic.

I have simply asked this question to ensure there is not a way of achieving this without the use of the Javascript image objects

I will of course be very grateful for any help, I just don't want you spending much time on me when there are others that need your help more. :-)

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Ben Carey
  • 16,540
  • 19
  • 87
  • 169
  • 4
    Your `.each` apparently iterates only the `document` and not the delegation targets. – Fabrício Matté Feb 08 '13 at 21:45
  • @FabrícioMatté That is a very good point, please ignore that. That is not the code I used, I wrote it for illustrative purposes and didn't test it. But well noticed, +1 :-) – Ben Carey Feb 08 '13 at 21:46
  • possible duplicate of [load() method deprecated?](http://stackoverflow.com/questions/12643160/load-method-deprecated) – Hannele Jul 05 '15 at 18:59

1 Answers1

4

The load event still exists, you just can't bind to it using .load anymore. Your event delegation example should continue to work on into 1.9 and 2.0 (if the browser you're testing in supports bubbling of the load event)

I personally would still use the new Image method because i don't trust that all browsers will always bubble the load event properly.

Edit: Sorry if i wasn't clear, the point i was making is that the load event is still there, you just have to properly bind to it. Since the load event doesn't bubble in all browsers (if in any browser?), you must bind the event directly to the image. I'd suggest using the method that you asked us not to provide you an example of.

Community
  • 1
  • 1
Kevin B
  • 94,570
  • 16
  • 163
  • 180
  • I thought it might be, but for some reason it didnt work in my script. I have debugged my code, not that there is much to debug, but I could not get it to work. I will update my question with my actual code. Thanks for your answer :-) – Ben Carey Feb 08 '13 at 21:44
  • I agree about the browsers not all necessarily bubbling correctly, that is why I have the `complete` fallback – Ben Carey Feb 08 '13 at 21:45
  • 1
    See the comment on your question, your logic on the `.each()` isn't correct, :) – Kevin B Feb 08 '13 at 21:46
  • 1
    And also, as Kevin said, if the browser doesn't bubble the `load` event, your delegated handler won't fire. – Fabrício Matté Feb 08 '13 at 21:46
  • @KevinB Yes it is, but only because I didnt test that code. It was purely for illustrative purposes. I will post the code I actually used in a mo :-) – Ben Carey Feb 08 '13 at 21:48
  • @BenCarey Can you explain where your updated code fails? It should work, even on cached images, assuming the load event properly bubbles. If the event doesn't bubble, you can't use event delegation to handle it. – Kevin B Feb 08 '13 at 22:02
  • @KevinB The event just doesnt bubble up the DOM, nothing is logged in the console. Does this code work with you? If so then the problem is else where in my code, i will have a look and see if i can debug further – Ben Carey Feb 08 '13 at 22:13
  • I haven't tested it myself, i would expect it to not work in all browsers due to the bubbling issue. – Kevin B Feb 09 '13 at 04:27
  • Which would pretty much mean you need to use the other method that you didn't want an example of. :-) – Kevin B Feb 09 '13 at 05:11
  • @KevinB Are you sure the `load` event still exists? I have created the following jsFiddle and it simply is not working... Any ideas? http://jsfiddle.net/ajc7J/1/ – Ben Carey Feb 10 '13 at 16:01
  • That's still using event delegation, which requires the event to bubble. the load event doesn't bubble. See here: http://jsfiddle.net/ajc7J/2/ – Kevin B Feb 10 '13 at 17:36
  • @KevinB Ah I see!! Was half asleep!! Of course the load event doesn't bubble!! Thanks Kevin, all sorted now :-) – Ben Carey Feb 11 '13 at 09:06