在 jQuery Mobile 中延迟加载图像

Question

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

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

关于页面的 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

您的代码在第一个页面视图上运行的原因是因为在您在 pageinit 事件处理程序中绑定到它之后触发了 window.load 事件，但是在随后的 AJAX 加载中您将绑定到 window.load 事件即使它不会再开火了。