Lazy Loading images within jQuery Mobile

Question

I'm trying to implement the Lazy Load plugin into my jQueryMobile site to help speed up loadtimes on pages that contain a ton of images.

If I bypass JQM's ajax page-loading by going directly to the URL like this: http://hello.com/about, the lazy loading works great. However, if I click-through to the About page from another page, which utilizes JQM's ajax page-loading, Lazy Load doesn't load.

The About page has an id of about => <div data-role="page" data-theme="a" id="about">

I've tried a number of variations of binding to the pageinit function with no success. My latest attempt is:

$('#about').live('pageinit', function() {
    $(window).load(function() {
        $("img.lazy").lazyload();
    });
});

Any guidance on this would be awesome. Thanks guys.

Answer 1

The window.load function will fire only once, and you are binding to it after it fires when pages are pulled into the DOM via AJAX. The solution to your issue is pretty easy, run the code when the specific page initializes:

$(document).delegate('#about', 'pageinit', function() {

    //notice I start the selection with the current page,
    //this way you only run the code on images on this pseudo-page
    $(this).find("img.lazy").lazyload();
});

This should work just fine since pageinit won't fire until after document.ready fires.

Also notice I used .delegate() instead of .live() since .live() has been depreciated and could be removed from future releases.

$(SELECTION).live(EVENT, EVENT-HANDLER);

is the same as:

$(document).delegate(SELECTION, EVENT, EVENT-HANDLER);

And for the bonus round, as of jQuery 1.7, both of the above functions actually map to .on() and you can use .on() in a delegated manor like so:

$(document).on(EVENT, SELECTION, EVENT-HANDLER);

Documentation:

• .live(): http://api.jquery.com/live
• .delegate(): http://api.jquery.com/delegate
• .on(): http://api.jquery.com/on

The reason your code worked on the first page-view was because the window.load event was firing after you bound to it in the pageinit event handler, but on subsequent AJAX loads you are binding to the window.load event even though it won't fire anymore.