jQuery Mobile缓存页面按顺序排列

时间:2012-08-17 15:56:39

标签: caching jquery-mobile

我有一个隐藏的标签列表。我尝试使用jquery移动文档中描述的data-prefetch属性。唯一的问题是它立刻触发了对所有这些请求的ajax请求,并且没有他们加载的订单。

通过滑动在下一页显示的页面中排序非常重要。

所以我决定尝试通过这段代码以编程方式缓存链接。

var last_cache_page = false;

function cache_next_page(){
if(last_cache_page == false){
    var cache_link = $('.cache').first();
    last_cache_page = cache_link;
}
else{
    var cache_link = last_cache_page.nextAll('.cache');
    last_cache_page = cache_link;
}

//Start Caching any other pages that we want to swip to
$.mobile.loadPage(cache_link.attr('href'), {showLoadMsg: false});
}

所以在$(document).on('pageshow')上我调用了cache_next_page()。那部分工作正常,真正的问题是当使用$ .mobile.loadPage时,一旦第一个缓存页面对dom感兴趣,就不会触发jquery移动页面相关事件。

我尝试过pageshow,pageinit和pageload,但它们只在第一次加载页面时触发。现在,如果我加载第一页直接启动缓存。也就是说,在不访问应用程序中的任何其他页面时,它会触发所有预期的事件,例如pageload。

只有当你从page_1开始然后转到page_2(其中包含启动缓存的代码)时才会在缓存页面插入dom时触发页面加载事件。

1 个答案:

答案 0 :(得分:0)

我发现从.loadPage返回的对象上有一个.done,所以我修改了我的代码,以便它按顺序缓存我的链接。

var last_cache_page = false;

function start_caching(){
    if(last_cache_page == false){
        var cache_link = $('.cache').first();
        last_cache_page = cache_link;
    }
    else{
        var cache_link = last_cache_page.nextAll('.cache').first();
        last_cache_page = cache_link;
    }

    if(cache_link.length == 1){
        //Start Caching any other pages that we want to swipe to
        new_page = $.mobile.loadPage(cache_link.attr('href'), {showLoadMsg: false});
        new_page.done(function(){
            start_caching();
        });
    }
}