在jQuery Mobile中延迟加载图像

Question

我试图在我的jQueryMobile网站中实现Lazy Load插件，以帮助加快包含大量图像的页面上的加载时间。

如果我通过直接跳转到像这样的网址跳过JQM的ajax页面加载：http://hello.com/about，延迟加载效果很好。但是，如果我从其他页面（使用JQM的ajax页面加载）单击转到About页面，则不会加载Lazy Load。

关于页面有about一个id =><div data-role="page" data-theme="a" id="about">

我已经尝试了一些结合，但没有成功的pageinit功能的变化。我最近的尝试是：

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

任何指导都很棒。多谢你们。

Answer 1

window.load函数只会触发一次，并且在通过AJAX将页面拉入DOM时，它会在触发后绑定到它。你的问题的解决方案是很容易的，运行代码时指定页面初始化：

$(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

你的代码上的第一页视图工作的原因是因为您在pageinit绑定到它后window.load事件被解雇事件处理程序，但是在随后的AJAX加载中，即使它不再触发，也会绑定到事件window.load。