Unable to lazy load images in a jQuery Mobile application (currently using LazyLoadXT)

Question

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

I have tried a few plugins, with little success so if there is another approach to this then please shout.

Answer 1

You can try lazySizes. The script detects new elements and visibility changes to those automatically. So you don't need to write any JS code. You only need to add the script and add a data-src attribute as also the class lazyload to your images.