jquery移动页面在ajax还原负载上的波动

Question

我正在使用一个移动应用程序，其中第一页有

    <ul>
    <li>121212</li>
    <li>123233</li>
    <li>232323</li>
    <li>4323423</li>
    <ul>

当用户单击"li“时，他/她进入下一页，该页面将通过Ajax检索与选定的"li”相关的数据。这就快好了..。

但当Ajax响应出现时，页面波动2次。意味着一次页面加载，下一次页面完全白，然后再次显示带有Ajax响应的页面。为什么？

J查询

 $("clickOnLi").click(function(){
        var id= $(this).val(); //get the selected li value
        $('.loadingGif').css({ 'display':'block' });
        $("#ulShowContent").html(''); // to remove old inner HTML to show new result html
        var dataString = 'selectedid='+id;
        $.ajax({
            type: "POST",
            url: remoteUrl+"handler.php",
            data : dataString,
            cache: true,
            success: function(response) {
                if(response){
                    $('.loadingGif').css({ 'display':'none' });
                    $("#ulShowContent").html(response); 
                }
                }
        });
    })



**and the result will show in this html** 


<ul id="ulShowContent" data-role="listview"> 
    <li class="comment chatsend">
        <div class="comment-meta">
            data 1
        </div>
    </li>

    <li class="comment chatsend">
        <div class="comment-meta">
            data 2
        </div>
    </li>
</ul>

Answer 1

您需要改变处理页面更改和AJAX调用的方式。

我从您的问题中了解到，在单击LI元素后，页面更改将被初始化并将AJAX调用发送到PHP服务器。

您需要改变这种逻辑。页面波动是由AJAX调用引起的，该调用是在从一个页面过渡到另一个页面期间执行的。

这个问题可以这样解决：

• 在第一页上，从列表元素中删除HREF属性
• 向每个列表元素添加一个单击事件
• 应在单击事件上执行AJAX调用，同时显示自定义加载程序(或使用默认加载程序)。
• 当检索服务器端数据时，您需要存储它，以便可以从另一个页面访问它。在这里，您将找到我的另一个回答，您可以在其中找到在页面转换期间存储数据的各种方法，或者找到它的这里，只需搜索一个名为:页面转换之间的数据/参数操作(您的最佳选择是一个这里)的章节。
• 使用changePage函数初始化页面更改
• 在pagebeforeshow事件期间(尚未显示页面)向新容器追加新数据
• 当第二页最终显示出来时，所有的东西都会出现