How to use jQuery live() for img onload event?

javascript html onload jquery
tybro0103 picture tybro0103 · Jul 5, 2011 · Viewed 10k times · Source

I want to run some code when an image is loaded. Also, I'd like to do it unobtrusively (not inline). More specifically, I want to use jQuery's live() function so it will happen for any dynamically loaded images.

I've tried:

<img class="content_image" alt="" src="..." />
<script>
    $('.content_image').live('load', function() {
      alert('loaded!');
    });
</script>

In addition to load, I've tried onload, and onLoad. When I replace with 'click' all works as expected so I know it's not some interfering bug.

I haven't been able to find a list of available event types for the live() function, so for all I know, it may not be possible.

Answer

T.J. Crowder picture T.J. Crowder · Jul 5, 2011

(It would be load, not onload or onLoad.)

load doesn't bubble (according to the img entry in the HTML5 spec, it's a "simple event", which don't bubble), so you can't use it with live or delegate, which rely on the event bubbling from an element to its ancestor element(s).

You'll have to hook it on the individual img elements (and do so before you set their src, since otherwise you can miss it; and always remember to watch for error as well). (Yes, you really can miss it: The browser is not single-threaded, just the JavaScript main thread. If you set src and the image is in cache or becomes available soon enough, the browser can fire the event. The way events are fired is that the browser looks to see what handlers are registered as of when the event is fired, and queues those to be called when the JavaScript main thread yields back to the browser. If there are no handlers registered, they aren't queued, and you never get the callback.)

Related questions

html - how to fill input text on load?

I have an HTML form in the view and I need to fill out some input fields with json variables that come from the server. I don't want to write javascript code for each input field, instead, I want to …

Read More
How to run a function when the page is loaded?

I want to run a function when the page is loaded, but I don’t want to use it in the <body> tag. I have a script that runs if I initialise it in the <body>, …

Read More
Setting focus on an HTML input box on page load

I'm trying to set the default focus on an input box when the page loads (example: google). My page is very simple, yet I can't figure out how to do this. This is what I've got so far: <html&…

Read More