Lazy Uploading Images to jQuery Mobile

Question

I am trying to embed the Lazy Load plugin on my jQueryMobile site to speed up loading on pages containing a ton of images.

If I get around JQM ajax page loading by going directly to a URL like this:, http://hello.com/aboutlazy loading works fine. However, if I go to the About page from another page that uses the JQM ajax page load, Lazy Load does not load.

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

I tried several options for binding to a function pageinitwithout success. My last attempt:

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

Any guidance on this would be awesome. Thanks guys.

Answer 1

window.load , , , DOM AJAX. , , :

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

, pageinit , document.ready.

, .delegate() .live(), .live() .

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

:

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

, jQuery 1.7, .on(), .on() , :

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

:

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

, , , window.load , pageinit, AJAX window.load .