jquery detect when specific (external) image has loaded

Question

When loading an iframe with a youtube clip in it, the very last file that comes in from youtube is this image:

http://i1.ytimg.com/vi/W6YOAlxT7Ls/hqdefault.jpg

I'd like to fire a function when that specific image is done loading. How can I detect this w/jquery?

I've tried this:

$('[![][1]][1]').on('load', function() { 
    // bam
});

...but it results in a reload of the same image. I don't need to fetch the image, I just need to know when it has been fetched.

Christ. Even this results in the image being re-fetched:

$.when($('[![][1]][1]').load()).then( bam() );

maybe `$('[src="http://i1.ytimg.com/vi/W6YOAlxT7Ls/hqdefault.jpg"]').on(...)` will help — Nikita U., Dec 23 '13 at 10:18
possibly duplicate http://stackoverflow.com/questions/2392410/jquery-loading-images-with-complete-callback — jogesh_pi, Dec 23 '13 at 10:23

score 1 · Accepted Answer · answered Dec 23 '13 at 10:19

1

try this

$('<img src="http://i1.ytimg.com/vi/W6YOAlxT7Ls/hqdefault.jpg"/>').one('load', function () {
        //your code to fire when image has loaded 
    }).each(function () {
        if (this.complete) $(this).load();
    });

answered Dec 23 '13 at 10:19

iJade

23,144
56
154
243

This too really helps because of the inconsistency of .load; thank you. – user2777052 Dec 23 '13 at 10:33

jquery detect when specific (external) image has loaded

1 Answers1