Lazy Загрузка изображений в jQuery Mobile

Question

Я пытаюсь реализовать плагин Lazy Load на моем сайте jQueryMobile, чтобы ускорить загрузку на страницах, содержащих тонну изображений.

Если я обойду загрузку ajax JQM, перейдя непосредственно по URL-адресу, подобному этому: http://hello.com/about, ленивая загрузка отлично работает. Однако, если я перейду на страницу About с другой страницы, в которой используется загрузка страницы ajax JQM, Lazy Load не загружается.

страница О имеет идентификатор about =><div data-role="page" data-theme="a" id="about">

Я пытался несколько вариаций связывания с pageinit функции без успеха. Моя последняя попытка:

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

Любое руководство по этому вопросу было бы замечательным. Спасибо, парни.

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, даже если он больше не срабатывает.