44

I have some code I am trying to run once my image has finished loading. I use this following jQuery code: 

$("#myimageid").load(function() {
    alert('Image Loaded');
});

However the popup never show up. I can't get the .load() function to work ! Anyone had issues with this?

Sender
  • 6,660
  • 12
  • 47
  • 66
Etienne Dupuis
  • 13,548
  • 6
  • 47
  • 58

2 Answers2

116

If you're running this after the image already has a set source, you need to do an additional check for caches images (who fired the event, just before you added an event handler listening for it). You can do that like this:

$("#myimageid").on('load', function() {
  alert('Image Loaded'); 
}).each(function() {
  if(this.complete) $(this).load();
});

Update for later versions of query, use:

if(this.complete) $(this).trigger('load');

Using (this).load(); will produce a Cannot read property 'indexOf' of undefined error

stef
  • 26,771
  • 31
  • 105
  • 143
Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • That worked ! Thanks mate $(document).ready(function() { $("#googleimage").load(function() { alert('Image Loaded'); }).each(function() { if (this.complete) $(this).load(); }); }); – Etienne Dupuis Aug 30 '10 at 12:50
  • 2
    nice, why was this so hard to find! – Dominic Sep 18 '12 at 09:56
  • Was just going to downvote for not working solution when I realized I was missing a dot when selecting my class. Duh! Thanks & upvoted! – Eduard Luca May 10 '13 at 19:41
  • This solved my iPad images loading issue. Guess there is something strange when images are cached on iPad – Mladen Janjetovic May 30 '13 at 13:47
  • Among several fixes, this is the one that worked for me. Thanks. – Arnaud Rinquin Oct 01 '13 at 08:54
  • it doesn't work if the image doesn't exist on the server. you should better try function urlExists(testUrl) { var http = jQuery.ajax({ type:"HEAD", url: testUrl, async: false }) return http.status; // this will return 200 on success, and 0 or negative value on error } then use if(urlExists('urlToImgOrAnything') == 200) { // success } else { // error } source: http://stackoverflow.com/questions/3327655/jquery-check-if-image-exists – George SEDRA Feb 14 '14 at 09:26
  • @GeorgeSEDRA that's solving a *completely* different problem and isn't at all appropriate for most cases. This question is "I want to do something when my image loads", not "how do I check if the images even exist?" Including images that don't exist in your page is a whole separate question, problem, and discussion. The code in the answer works correctly as-is, it triggers when an image finishes loading *if and when* it finishes loading. – Nick Craver Feb 15 '14 at 14:42
  • 1
    Worth noting `.complete` is not defined by jQuery but on the DOM element itself. Therefore `$(selector).complete == undefined` so you might want unwrap it `$(selector)[0].complete`. The answer implies this as $.each assigns raw DOM elems as `this` but I got confused for a wild moment :) – nuala Mar 26 '14 at 13:10
  • @NickCraver, but this ain't working if i add an image dynamically. How to get the event in that case? :-/ – Sahil Mittal Sep 24 '14 at 10:59
  • @SahilMittal you just need to attach the event before before setting the `src` attribute which causes the load to happen. – Nick Craver Sep 24 '14 at 13:15
  • +1, right. How can i ask such thing ! Thanks anyways :) – Sahil Mittal Sep 24 '14 at 13:41
  • 1
    @yoshi is correct. I believe `$(selector).prop("complete")` should also work. – sam May 26 '16 at 19:39
  • 4
    In jquery 3 `if(this.complete) $(this).trigger('load');` – Artem P Mar 31 '17 at 12:55
  • Confirming @hlcs comment that one has to use `$(this).trigger('load');` and not `$(this).load();` which will give an error in jQuery 3.1.0 and probably other versions – stef Feb 05 '18 at 17:14
  • But the `alert('Image Loaded'); ` sometimes triggered twice. – Antonio Ooi Feb 23 '21 at 10:20
0

What happens when you clear your browser's cache and try the script again? From the jQuery load() docs:

It is possible that the load event will not be triggered if the image is loaded from the browser cache. To account for this possibility, we can use a special load event that fires immediately if the image is ready. event.special.load is currently available as a plugin

In general, it is not necessary to wait for all images to be fully loaded. If code can be executed earlier, it is usually best to place it in a handler sent to the .ready() method.

So it sounds like your cached image isn't triggering the load event, so you may want to try the plug-in that's mentioned. You can find the JS file to download here.

Hope this helps!

David Hoerster
  • 28,421
  • 8
  • 67
  • 102