Jquery Mobile - Chậm với chuyển tiếp trang

Question

Sử dụng điện thoại di động jquery Im sử dụng đầu trang và chân trang liên tục. Điều hướng chân trang có các tab và khi bạn nhấp vào tab, nó sẽ tải trang qua ajax. Vấn đề là sự chuyển đổi từ trang này sang trang khác, đó là ajax đang tải một div với id cụ thể, rất chậm. Mất 2-5 giây để quá trình chuyển đổi trang diễn ra. khi tôi nhấp vào một tab, nó sẽ làm nổi bật một màu khác nhưng không có gì xảy ra, sau đó vài giây sau khi quá trình chuyển đổi diễn ra. Đôi khi, nếu bạn nhấp nhanh để ngắt bố cục và chân trang sẽ biến mất. Im làm điều này trên một ipad với phiên bản mới nhất của điện thoại di động jquery. Jquery di động chỉ thực sự chậm? Sẽ chờ đợi cho đến khi ios5 làm cho tất cả sự khác biệt?

CẬP NHẬT

Dưới đây là một đoạn mã:

<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> 

Answer 1

Đôi khi nếu bạn bấm vào để nhanh chóng phá vỡ bố cục và footer dissappears:

Đây là một vấn đề đã được áp dụng ở đây, chưa tìm được giải pháp: https://stackoverflow.com/questions/7484522/jquerymobile-click-on-background-fires-event-header-footer-data-position-fixe

Về thời gian tải, nó thực sự là lạ, cố gắng tập trung lỗi với loại bỏ các phần của mã của bạn và thu hẹp ở đâu và tại sao thời gian tải dài đang xảy ra ... hy vọng điều này sẽ giúp.

Answer 2

Tôi đang đối mặt với cùng một vấn đề. Vô hiệu hóa chuyển tiếp màn hình ưa thích đã sửa nó cho tôi.

Để làm điều này phổ biến:

$.mobile.defaultPageTransition = 'none'; 

Answer 3

Bạn sử dụng cùng một id nhiều lần. Đối với tôi nó gây ra vấn đề tương tự. Hãy thử xóa/thay đổi id trùng lặp.

Ví dụ, bạn chỉ cần sao chép-dán phần này để lặp lại nó trên trang thứ hai:

<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>