在 jQuery mobile 中显示之前向页面添加动态内容答案

【问题标题】：Adding dynamic content to the page before showing it in jQuery mobile在 jQuery mobile 中显示之前向页面添加动态内容
【发布时间】：2014-01-22 16:35:49
【问题描述】：

在我的 jQuery 手机 Phonegap 应用程序中，我有一个页面，其中有一个列表视图，此列表内容是动态添加的，问题是当我导航到此页面时，它首先显示为空，几秒钟后添加了列表视图到页面并显示，我使用 pagebeforeshow 事件在显示页面之前添加列表视图内容，但它对我不起作用“列表视图在显示页面后显示”并且用户会注意到并看到内容同时它添加到页面。我该如何解决这个问题，以便在显示页面之前添加列表内容？请帮帮我..

提前致谢。

HTML

<body>

<div data-role="page" id="EmployeesListPage">

<div  data-role="header"  data-position="fixed"  data-tap-toggle="false" data- fullscreen="false"   data-theme="b">
<h3> Employees</h3>
</div>

<div data-role="content">

<ul data-role="listview"   id="EmpList"   data-inset="true"  data-filter="true" data-  filter-placeholder="Search " data-split-icon="delete"  style="margin-top: 30px;" > 

</ul>
</div>
</div>
</body>

Java 脚本

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady()
{
    loading('show');

    $('#EmployeesListPage').on( 'pagecreate',function(event){ 

         db.transaction(getAllEmployees, transactionError);
     });
 }

function getAllEmployees(tx)
{
    tx.executeSql('SELECT EmpName,Salary,Gender,Country  FROM  Employee',         [],getEmpSuccess,transactionError);

}

function  getEmpSuccess(tx,result)
{    

  if (result.rows.length)
  {


   for(var i=0;i< result.rows.length; i++)
   {     
       var row = result.rows.item(i);
       $('#EmpList').append('<li><a href="#">' +'<font class="line1">' + '  '+row['EmpName'] + '</font><BR><BR>' +'<font     size="6px" class="line2" > '+ row['Gender']  +'</font>'+'<font size="6px" class="line3"> ' +row['Country']+' </font>'+'<font  size="6px"   class="line4"> '+ row['Salary']+'</font><BR> '+'</a><a href="#" >Delete</a></li>' );


                                                                                                                                                                                                    }


      $('#EmpList').listview('refresh');
       loading('hide');
      }
   }


  function transactionError(tx, error)
 {  
      alert("Database Error: " + error);
 }


 function loading(SH) 
 {
     setTimeout(function(){

   if( SH == "show")
   {
        $.mobile.loading( "show", {
           text:"Loading...",
           textVisible: true,
           theme: "b",
           textonly: false
        });
    }
    else if( SH == "hide")
    {
        $.mobile.loading("hide"); 

    }

      }, 1000); 
   }

【问题讨论】：

使用pagecreate事件。
@OmarThanks，我已经尝试过了，但问题仍然存在
@Omar 这个问题还有其他解决方案吗？
@Omar 你能帮帮我吗？？
试试pagebeforechange。请注意，转换速度很快，从服务器检索数据可能需要一些时间。

标签： jquery-mobile cordova jquery-mobile-listview

【解决方案1】：

发生这种情况的原因是事务异步运行。因此，无论您将其放在 PAGE 生命周期的哪个位置，您都将面临遇到这种“先空后非空”现象的风险。

想到的一些选项：

在事务回调完成之前显示 ajax 微调器（请参阅 JQM 文档）
在应用启动时加载必要的数据，并在 pagebeforeshow 生命周期事件期间将其存储在一个全局变量中以供填充
接受现有行为

编辑： 根据您更新的代码...

我注意到您的 HIDE 调用是在循环内通过记录完成的。这意味着在附加第一条记录后，微调器被告知隐藏。您还将在每次迭代时刷新控件的内容。我会将以下代码移动到第一个右大括号的下方/上方：

$('#EmpList').listview('refresh');
loading('hide');

这将改变它：

   $('#EmpList').listview('refresh');
   loading('hide');
   }
}

收件人：

   }
   $('#EmpList').listview('refresh');
   loading('hide');
}

【讨论】：

@MattRay 非常感谢您的帮助，因为我已经搜索并尝试了很多东西，但问题仍然存在，我尝试了第一个选项“显示正在加载”，但加载器也同时与内容一起出现时刻，即使我在调用交易之前进行 $.mobile.loading(...) ，它也没有出现一次显示页面，你能帮我解决这个问题吗？
@user 没问题。您能否更新代码清单以展示您目前所拥有的内容？
@MattRayIhave 更新了我的代码，如您所见，我在调用事务之前调用了加载小部件，但页面显示为空 2 秒，然后加载器和内容“员工列表”一起出现
@MattRayThanks ，我试过了，页面显示为空 1 秒然后出现列表和加载器，显示页面后加载器仍然没有出现
@MattRay 你能帮帮我吗？