Question

I have some code which does the following:

1. External content is loaded via AJAX (video thumbnail images)
2. The new content is then inserted into a div using $(“#content”).append();
3. 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?

Answer 1

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();
});