jQuery, images and load()

Question

I have a script that does images resizing on load:

$( document ).ready( function() {
  $( '.image' ).load( function() {
      // $(this).happens
   } );
} );

this seems to work fairly well with pages.

Now I am using ajax to get HTML elements, some of which might contains images that needs resizing, with the class "image". But the above snippet (when in the body of the ajax html) does not fire. Is there anyway to add this event somehow? I've tried ready(), but it fires before I can get the width/height. thanks

I also tried:

$( '.image' ).on( 'load', function() {
      // $(this).happens
} );

score 1 · Accepted Answer · answered Dec 19 '11 at 13:39

1

Your code will register callback functions to all images with class ".image" only upon initial page load. If you load some more images later on via AJAX request, those callbacks will not be registered and thus - resize won't happen.

If you need to register some callbacks for elements that are not yet present in DOM, you should use live() function from jQuery. That way you will be able to add more elements and have your callbacks being property registered for them.

Please refer to example and official jQuery live() documentation for details.

answered Dec 19 '11 at 13:39

ŁukaszBachman

33,595
11
64
74

2

It is worth noting that on jQuery 1.7+ you should use the [`$('selector').on(events, selector, data, handler);`](http://api.jquery.com/on/) method, which accounts for this behavior. – Shef Dec 19 '11 at 13:41
Nice to know :) Haven't checked out 1.7 documentation yet. Will do now. Thx! – ŁukaszBachman Dec 19 '11 at 13:45
Seems like it still happens, unless theres a usecase i dunno about – Timmy Dec 19 '11 at 13:51
Which solution did you follow? – ŁukaszBachman Dec 19 '11 at 15:45

score 1 · Answer 2 · edited May 23 '17 at 12:27

1

I'd do what this older post suggests. In your ajax callback run a trigger like trigger('images_loaded') and then do your resizing in a bind that's bound to the trigger

edited May 23 '17 at 12:27

Community

1
1

answered Dec 19 '11 at 13:39

Tin Can

2,540
2
29
39

ya, thought of that, but then the image might not be loaded, and it fires early.. – Timmy Dec 19 '11 at 14:00

jQuery, images and load()

2 Answers2