1

I want to execute a function after an element has been loaded.

jQuery's load() event seems to make this easy, but it was deprecated in v1.8. I'm looking for a modern version of a similar thing to this:

$( "img.userIcon" ).load(function() {
  if ( $( this ).height() > 100) {
    $( this ).addClass( "bigImg" );
  }
});

Must be cross-browser, can be jQuery or vanilla JS.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
suryanaga
  • 3,728
  • 11
  • 36
  • 47
  • 1
    @kmoe Wrong `.load` I guess... – VisioN May 13 '14 at 15:40
  • 1
    @VisioN oops... well, now I wish I could undo flags – kmoe May 13 '14 at 15:41
  • The .load function wasn't cross browswer supported, so that's why it's deprecated, I don't think it's been replaced. – sage88 May 13 '14 at 15:44
  • http://api.jquery.com/load-event/ The doc says to use the `load` event and gives this example : `$( "#book" ).load(function() { ... }` – TCHdvlp May 13 '14 at 15:45
  • @TCHdvlp It also says that it's deprecated and that using it for this exact purpose is not cross browser supported... – sage88 May 13 '14 at 15:47
  • ho ! My bad, it's written so tiny – TCHdvlp May 13 '14 at 15:48
  • @TCHdvlp No worries, read the caveats section of the page you linked. – sage88 May 13 '14 at 15:49
  • @sage88 Where is that written? – VisioN May 13 '14 at 15:50
  • @VisioN http://api.jquery.com/load-event/ see this section: Caveats of the load event when used with images – sage88 May 13 '14 at 15:51
  • 1
    @sage88 Where is it written that these caveats were the main reason for deprecating the method? Please see the [following ticket](http://bugs.jquery.com/ticket/11733) in the tracker for the official reason. – VisioN May 13 '14 at 15:52
  • @VisioN You're right for the reason it was deprecated. That said, it and all alternative forms of it, have never worked well for the purpose the author has, and so should not be used. – sage88 May 13 '14 at 15:57
  • So what should I use? The suggestion in the 'duplicate' question doesn't seem to work in my tests. – suryanaga May 13 '14 at 16:01
  • @sanjaypooyzer Unfortunately, I don't think there is a cross broswer way to do this. I think the answer below is probably your best bet, but it's not going to work reliably or consistently see the comments on this: http://stackoverflow.com/questions/544993/official-way-to-ask-jquery-wait-for-all-images-to-load-before-executing-somethin which is what your question is actually a duplicate of. – sage88 May 13 '14 at 16:05

1 Answers1

0

The documentation page says that .load(callback) is shorthand for .on('load', callback)

The .load(callback) was deprecated because of ambiguity with the AJAX .load(callback) (see here)

Andrew Vermie
  • 623
  • 3
  • 8