在jQuery Mobile中延迟加载图像

我正试图在我的jQueryMobile站点中实现该插件，以帮助加快包含大量图像的页面的加载速度

如果我通过如下方式直接转到URL来绕过JQM的ajax页面加载：

http://hello.com/about

，延迟加载非常有效。但是，如果我从另一个页面点击About页面，该页面利用JQM的ajax页面加载，则不会加载延迟加载

About页面的id为

About

=>

我尝试了许多绑定到

pageinit

函数的变体，但都没有成功。我最近的尝试是：

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

---

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

窗口.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（）

  ：

• .delegate（）

  ：

• .on（）

  ：

---

您的代码在第一个页面视图上工作的原因是，在

pageinit

事件处理程序中绑定到

window.load

事件后触发了该事件，但在随后的AJAX加载中，您将绑定到

window.load

事件，即使它不再触发。

谢谢Jasper。这一定是我在这里得到的最完整的答案之一。你太棒了。