Jquery Mobile - 緩慢頁面轉換

使用jQuery的移動即時通訊使用持久性頁眉和頁腳。頁腳導航有標籤，當你點擊一個標籤時，它通過ajax加載一個頁面。問題在於從一個頁面到另一個頁面的轉換，這是使用特定ID加載div的ajax，非常緩慢。頁面轉換需要2-5秒。當我點擊一個標籤時，它會突出顯示不同的顏色，但沒有任何反應，然後在幾秒鐘後發生轉換。有時候，如果您單擊以快速佈局中斷和頁腳消失。我使用最新版本的jQuery Mobile在ipad上做這件事。 jquery mobile是否真的很慢？將等待，直到ios5使所有的區別？Jquery Mobile - 緩慢頁面轉換

UPDATE

下面是一個代碼片段：

<div data-role="page" id="page1"> 
    <div data-role="header" data-position="fixed"> 
    <h1>Page Title</h1> 
    <a href="#dialog" data-transition="slidedown" data-icon="check">Add</a> 
    </div> 
    <div data-role="content"> 
    <ul data-role="listview"> 
     <li data-role="list-divider"><span class="ui-li-count">2</span></li> 
     <li> 
     <h3>Stephen Weber</h3> 
     <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p> 
     <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p> 
     <p class="ui-li-aside"><strong>6:24</strong>PM</p> 
     </li> 
</ul> 
    <div data-role="footer" class="nav-glyphish-example" data-id="myfooter" data-position="fixed"> 
    <div data-role="navbar" class="nav-glyphish-example" data-grid="b"> 
     <ul> 
     <li><a href="#page1" data-transition="reverse slide" id="chat" data-icon="custom" class="ui-btn-active ui-state-persist">Link 1</a></li> 
     <li><a href="#page2" data-transition="slide" id="email" data-icon="custom">Link2</a></li> 
     <li><a href="#page3" data-transition="slide" id="skull" data-icon="custom">Link 3</a></li> 
     </ul> 
    </div> 
    </div> 

<div data-role="page" id="page2"> 
    <div data-role="header" data-position="fixed"> 
    <h1>Page Title</h1> 
    <a href="#dialog" data-transition="slidedown" data-icon="check">Add</a> 
    </div> 
    <div data-role="content"> 
    <ul data-role="listview"> 
     <li data-role="list-divider"><span class="ui-li-count">2</span></li> 
     <li> 
     <h3>Stephen Weber</h3> 
     <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p> 
     <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p> 
     <p class="ui-li-aside"><strong>6:24</strong>PM</p> 
     </li> 
</ul> 
    <div data-role="footer" class="nav-glyphish-example" data-id="myfooter" data-position="fixed"> 
    <div data-role="navbar" class="nav-glyphish-example" data-grid="b"> 
     <ul> 
     <li><a href="#page1" data-transition="reverse slide" id="chat" data-icon="custom" class="ui-btn-active ui-state-persist">Link 1</a></li> 
     <li><a href="#page2" data-transition="slide" id="email" data-icon="custom">Link2</a></li> 
     <li><a href="#page3" data-transition="slide" id="skull" data-icon="custom">Link 3</a></li> 
     </ul> 
    </div> 
    </div>

來源

2011-09-21 John

提供一些代碼，說明你是真的在做什麼？錨點如何提供？您是否使用頁面定義來加載頁面？添加一些代碼，會有幫助.. – zyrex

嘗試刪除頁面過渡動畫，看看它是否加載頁面更快。這將縮小它的ajax請求是永久佔用還是動畫本身。 – adam

有時候，如果您單擊快速佈局休息和頁腳 dissappears：

這是一個問題已經在這裏得到解決，還沒有找到解決方案：https://stackoverflow.com/questions/7484522/jquerymobile-click-on-background-fires-event-header-footer-data-position-fixe

關於加載時間，它確實很奇怪，試着將錯誤集中在刪除代碼的一部分，並縮小在哪裏以及爲什麼發生長時間的加載時間...希望這有助於。

來源

2011-09-21 08:48:39 zyrex

我使用jQuery Mobile的scrollview插件。這對加載頁面有什麼影響嗎？ – John

其實只是刪除了scrollview插件，並沒有太快。基本上我有頁腳的標籤，當我點擊去一個不同的標籤時，它會在那裏停留幾秒鐘。然後發生頁面轉換，在這種情況下是幻燈片。然後點擊頁腳中的前一個標籤，再次掛起幾秒鐘，然後轉換回前一個標籤。這不僅讓人看起來感覺笨重，而且讓人們雙擊，當發生奇怪的事情發生時，就像一半的頁面消失或頁腳消失或根本沒有任何反應。 – John

嘗試縮小錯誤來自哪裏（不包括代碼的逐步部分），在我看來它不是一個正常的JQM行爲。 iPad本身運行正常嗎？背景中的任何東西會讓它變慢或讓它等待？ – zyrex

我正面臨同樣的問題。禁用奇特的屏幕過渡對我來說是固定的。

普遍地做到這一點：

$.mobile.defaultPageTransition = 'none';

來源

2011-11-10 20:32:59 Charles

RC3的性能得到了極大的提升。升級Jquery Mobile也會有所幫助。 – Charles

可以使用相同的IDS多次。對我而言，它造成了類似的問題嘗試刪除/更改重複的ID。

例如，你只需複製粘貼此節以複製它在第二頁上：

<li><a href="#page1" data-transition="reverse slide" id="chat" data-icon="custom" class="ui-btn-active ui-state-persist">Link 1</a></li> 
<li><a href="#page2" data-transition="slide" id="email" data-icon="custom">Link2</a></li> 
<li><a href="#page3" data-transition="slide" id="skull" data-icon="custom">Link 3</a></li>

來源

2013-11-07 08:08:20

Jquery Mobile - 緩慢頁面轉換

回答

相關問題