jquery - 在 jQuery Mobile 中延迟加载图像

Question

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

如果我通过直接访问如下 URL 来绕过 JQM 的 ajax 页面加载:http://hello.com/about ，延迟加载效果很好。但是，如果我从另一个页面点击进入“关于”页面(该页面利用 JQM 的 ajax 页面加载)，则延迟加载不会加载。

“关于”页面的 ID 为 about => <div data-role="page" data-theme="a" id="about">

我尝试了多种绑定(bind)到 pageinit 的变体功能没有成功。我最近的尝试是:

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

任何关于这方面的指导都会很棒。谢谢大家。

Answer 1

window.load 函数只会触发一次，当页面通过 AJAX 拉入 DOM 时，您将在触发后绑定(bind)到它。问题的解决方案非常简单，在特定页面初始化时运行代码:

$(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() 已被折旧并且可以删除从 future 的版本中。

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

等同于:

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

对于奖励回合，从 jQuery 1.7 开始，上述两个函数实际上都映射到 .on() 并且您可以在委托(delegate)庄园如下:

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

文档:

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

您的代码在第一个页面 View 上运行的原因是因为 window.load 事件在您在 pageinit 事件处理程序中绑定(bind)到它之后触发，但是在后续 AJAX 加载您绑定(bind)到 window.load 事件，即使它不再触发。