Question

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

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

“关于”页面的ID为about =＆gt; <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事件，即使它不会再发生了。

懒惰在jQuery Mobile中加载图像

1 个答案: