Question

我正在使用骨干来创建我的所有观点。我的一些观点非常耗费资源，需要一段时间才能加载到模板中。因此，当点击某些lin时，我想首先显示加载叠加层，并在渲染视图时将其删除。

$('.class').live('click', function(){
    $("#loading").fadeIn(); 
    // this changes the url and then the view is called.
});

但问题是加载但是只有在渲染视图后才会出现。为什么是这样？这里的事件模式是什么？就像你点击链接一样，它首先加载网址，然后只加载点击回调中的内容，因为它似乎是这样。即使这样做也是如此：

$('.content a').click(function () {
     var f = $(this);
     $("#loading").show();
     Backbone.history.navigate(f.attr("href"), true);
     return false;
 });

Answer 1

这是可能的事件序列：

点击发生。
$("#loading").fadeIn();被召唤。
您更改了网址并激活了路由器。
您的视图已激活并开始渲染。
您的视图完成呈现。
浏览器再次获得控制并开始清除工作积压，特别是浏览器最终从 1 进入fadeIn。

例如，看看这样简单的事情：

$('button').click(function() {
    $('div').after('<p>Loading...</p>');
    for(var i = 0; i < 10000; ++i)
        $('div').text(i);
});

演示：http://jsfiddle.net/ambiguous/sEvv5/

您可能需要根据计算机的速度向上或向下调整10000倍。

您需要做的是在您放置#loading和开始渲染昂贵视图之间将控制权交还给浏览器。一种常见的方法是使用setTimeout，超时为零;例如：

$('button').click(function() {
    $('div').after('<p>Loading...</p>');
    setTimeout(function() {
        for(var i = 0; i < 10000; ++i)
            $('div').text(i);
    }, 0);
});

演示：http://jsfiddle.net/ambiguous/qd9Ly/

在您的情况下，请尝试将// this changes the url and then the view is called.部分放在setTimeout。

Phonegap iOS应用程序，Jquery Click事件

1 个答案: