javascriptjqueryimagejquery-eventsimage-preloader

Detect image load in jQuery 1.8+ - alternative to load() since deprecation


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. :-)


Solution

  • 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.