jQuery load() event not firing after loading content via AJAX

Question

I have some code which does the following:

External content is loaded via AJAX (video thumbnail images)
The new content is then inserted into a div using $("#content").append();
A mobile touch scrolling helper (iScroll) is applied to this div.

However the jQuery "load" event is not firing when the DOM changes due to an AJAX event, which means the call to initialise the scroller is happening too soon (before the images inthe content has loaded) which means it often doesn't get intiiallised. Without waiting for the images to load the content box is often short enough such that a scroll function isn't needed, but then when the images subsequently load, the box is not scrollable.

$("#videoList").append(videoThumbnails);

$(document).load(function () {
  // doesn't fire
  initScroller(); 
});

It appears that jQuery's append function does not block until all images referenced in the appended HTML have loaded.

How can I detect that all of the images loaded by the AJAX function have finished loading in order to call the initScroller() function AFTER all images have loaded?

The load event doesnt fire once content added using AJAX is loaded - it fires on initial load — Manse
– Manse, Commented Nov 12, 2012 at 15:32
possible duplicate of jquery: event for when ajax loaded content is all loaded (including images) — Manse
– Manse, Commented Nov 12, 2012 at 15:34
The load event does not propagate, and the document does not have a load event. — user400654
– user400654, Commented Nov 12, 2012 at 15:36
you can always use the ajax complete event, to trigger the events after ajax completes instead of using page load. More info: http://api.jquery.com/jQuery.ajax/ and http://docs.jquery.com/Ajax_Events — Andrei R
– Andrei R, Commented Nov 12, 2012 at 15:40
Thanks but that also has the same problem. It triggers only when the AJAX event completes, not when all dependent images have loaded. — NickG
– NickG, Commented Nov 12, 2012 at 15:51

NickG · Accepted Answer · 2012-11-12 15:58:01Z

3

OK I've found the solution in another similar question. It turns out there's a jQuery waitForImages plugin which does exactly what I want:

So I can just do this:

$("#videoList").waitForImages(function () {
    // Fires when all images in the #videoList div have loaded
    initScroller();
});

answered Nov 12, 2012 at 15:58

NickG

9,90921 gold badges83 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nxtwrld · Accepted Answer · 2012-11-12 15:36:42Z

2

The methods you are trying to use are triggered only once, when the page is loaded, but not for changes you make to the DOM aftewards (e.g. inserting content with ajax).

If you want to observer DOM changes you can use the DOMNodeInserted event

$(document).bind("DOMNodeInserted", function(event) {   ....do stuff...here     });

But generally it would be better to trigger this with the ajax callback.

$('#targetElementForYourContent').load('server/url.html', function() {
     ...do stuff here....
});

answered Nov 12, 2012 at 15:36

nxtwrld

2,06216 silver badges17 bronze badges

Collectives™ on Stack Overflow

jQuery load() event not firing after loading content via AJAX

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related