jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了懒惰在jQuery Mobile中加载图像大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试将 Lazy Load@L_772_1@实现到我的jQuerymobile站点,以帮助加快包含大量图像的页面上的加载时间.

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

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

我已经尝试了一些绑定到pageinit函数的变体而没有成功.我的最新尝试是:

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

对此的任何指导都很棒.多谢你们.

解决方法

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();
});

这应该工作得很好,因为在document.ready触发之后,pageinit才会触发.

另请注意,我使用.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中加载图像全部内容,希望文章能够帮你解决懒惰在jQuery Mobile中加载图像所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。