imágenes carga diferida dentro de jQuery Mobile

Question

estoy tratando de poner en práctica el plugin Lazy Load en mi sitio jquery mobile para ayudar a acelerar loadtimes en las páginas que contienen una gran cantidad de imágenes.

Si omito la página de ajax de JQM cargando directamente en la URL como esta: http://hello.com/about, la carga diferida funciona muy bien. Sin embargo, si hago clic en la página Acerca de de otra página, que utiliza la carga de página ajax de JQM, la carga diferida no se carga.

La página Acerca tiene un ID de about =><div data-role="page" data-theme="a" id="about">

He intentado una serie de variaciones de unión a la función pageinit sin éxito. Mi último intento es:

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

Cualquier orientación sobre esto sería increíble. Gracias chicos.

Answer 1

La función window.load se activará solo una vez, y la vinculará después de que se dispare cuando las páginas se arrastren al DOM mediante AJAX. La solución a su problema es bastante fácil, ejecute el código cuando se inicializa la página específica:

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

Esto debería funcionar bien desde pageinit no va a disparar hasta después document.ready incendios.

Observe también he utilizado en lugar de .delegate().live().live() ya se ha depreciado y podría ser eliminado de futuras versiones.

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

es lo mismo que:

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

Y para la ronda de bonos, a partir de jQuery 1.7, tanto de las funciones anteriores realidad mapa para .on() y se puede utilizar .on() en una casa delegado como tal :

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

Documentación:

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

La razón su código trabajó en la primera página-vista era porque el evento window.load estaba disparando después obligado a que en el pageinit controlador de eventos, pero en las cargas AJAX subsiguientes está vinculando al evento window.load a pesar de que ya no se disparará.