Phonegap iOS with Jquery Click events

Question

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

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

但问题是加载，但只有在渲染视图后才会出现。这是为什么呢？这里的事件模式是什么？就像当您单击链接时，它会先加载 url，然后只加载单击回调中的内容，因为看起来如此。即使这样，它也会做同样的事情：

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

Answer 1

这是可能的事件序列：

1. 点击发生。
2. $("#loading").fadeIn();被称为。
3. 您更改 URL 并激活路由器。
4. 您的视图已激活并开始渲染。
5. 您的视图完成渲染。
6. 浏览器再次获得控制权并开始清除工作积压工作，特别是浏览器最终从 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中。