Lazy Load XT not lazy loading images correctly in jQuery Mobile application

I am having difficulty implementing a lazy loading feature in my jQM application using Lazy Load XT v1.0.6.

I am finding that when I scroll down the image isn't being shown, however when I switch to a different tab in my browser and then switch back the images are there. I thought this may be a strange quirk of Firefox, however this happens on both the latest versions of Firefox and Chrome.

<img src="/img/default-img.jpg" data-src="/img/product/1872.jpg" class="product_image" width="200" height="300">

What is happening here? Is pageinit the correct event for this code?

I am using jQuery Mobile v1.3.1.

This is the code I am using to attempt to lazy load my images when the user scrolls down.

$(document).on('pageinit', function (event, ui) {
    var page = $(event.target);
    page.find(".container .product_image").lazyLoadXT();
});

ressio / lazy-load-xt

Lazy Load XT not lazy loading images correctly in jQuery Mobile application #47