5

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

如果我通过直接访问这样的 URL 来绕过 JQM 的 ajax 页面加载：http://hello.com/about延迟加载效果很好。但是，如果我从另一个使用 JQM 的 ajax 页面加载的页面点击到 About 页面，则延迟加载不会加载。

About 页面的 id 为about=><div data-role="page" data-theme="a" id="about">

我尝试了多种绑定到该pageinit函数的变体，但均未成功。我最近的尝试是：

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

任何关于这方面的指导都会很棒。多谢你们。

4

1 回答 1

7

该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()since.live()已被贬值，可能会从未来的版本中删除。

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

是相同的：

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

对于奖金回合，从 jQuery 1.7 开始，上述两个函数实际上都映射到.on()并且您可以.on()在委托庄园中使用，如下所示：

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

文档：

The reason your code worked on the first page-view was because the window.load event was firing after you bound to it in the pageinit event handler, but on subsequent AJAX loads you are binding to the window.load event even though it won't fire anymore.

于 2012-04-19T21:18:34.240 回答