懒惰在jQuery Mobile中加载图像

Question

我正在尝试将Lazy Load插件实现到我的jQueryMobile站点,以帮助加快包含大量图像的页面上的加载时间.

如果我通过直接转到这样的URL来绕过JQM的ajax页面加载:http://hello.com/about,延迟加载效果很好.但是,如果我从另一个页面点击进入"关于"页面,该页面使用了JQM的ajax页面加载,则不会加载Lazy Load.

"关于"页面的ID为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函数只会触发一次,当你通过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

您的代码在第一个页面视图上工作的原因是因为window.load事件在pageinit事件处理程序中绑定到它之后触发,但在后续的AJAX加载中,window.load即使它不再触发,您也会绑定到事件.