Mã di động Jquery cho Điều hướng nhấp nháy với PhoneGap

Question

Tôi tin rằng bài đăng này là giải pháp cho sự cố của tôi Flickering when navigating between pages. Cụ thể:

$(document).bind("mobileinit", function() 
{ 
    if (navigator.userAgent.indexOf("Android") != -1) 
    { 
    $.mobile.defaultPageTransition = 'none'; 
    $.mobile.defaultDialogTransition = 'none'; 
    } 
}); 

Tôi đến từ C# thế giới và khá nhiều CLUELESS như jQuery di động. Tôi muốn thêm đoạn mã này nhưng không chắc chắn ở đâu. Nếu nó quan trọng tôi nghĩ rằng tôi sẽ thêm nó vào jquery.mobile-1.1.0.rc.1.js nhưng sau đó tôi không biết nơi ở đó, Nếu đó là tập tin đúng.

Answer 1

Mã này phải được chạy sau khi bạn bao gồm jQuery Core và trước khi bạn bao gồm jQuery Mobile. Lý do là để chạy mã, jQuery phải có mặt, nhưng trình xử lý sự kiện này cần phải bị ràng buộc trước khi jQuery Mobile khởi tạo.

Ví dụ:

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
<script> 
$(document).bind("mobileinit", function() 
{ 
    if (navigator.userAgent.indexOf("Android") != -1) 
    { 
    $.mobile.defaultPageTransition = 'none'; 
    $.mobile.defaultDialogTransition = 'none'; 
    } 
}); 
</script> 
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 

Tài liệu: http://jquerymobile.com/demos/1.1.0/docs/api/globalconfig.html

Ngoài ra, UA sniffing là không cần thiết vì jQuery Mobile kiểm tra các thiết bị cho 3D CSS transform hỗ trợ và chỉ sử dụng các hiệu ứng chuyển tiếp thoải mái trên các thiết bị đó hỗ trợ họ. Điều này được thực hiện cho bạn trong jQuery Mobile 1.1.0+, nhưng chuyển đổi dự phòng mặc định là fade vì vậy bạn vẫn phải thay đổi mặc định đó.

Xác định chuyển dự phòng để hỗ trợ phi 3D

Theo mặc định, tất cả các hiệu ứng chuyển tiếp trừ phai đòi hỏi 3D chuyển đổi hỗ trợ. Các thiết bị thiếu hỗ trợ 3D sẽ quay trở lại chuyển tiếp mờ dần, bất kể chuyển đổi được chỉ định là gì. Chúng tôi thực hiện việc này để chủ động loại trừ các nền tảng hoạt động kém như Android 2.x khỏi các chuyển tiếp nâng cao và đảm bảo chúng vẫn có trải nghiệm mượt mà. Lưu ý rằng có các nền tảng như Android 3.0 hỗ trợ kỹ thuật chuyển đổi 3D nhưng vẫn có hiệu suất hoạt ảnh kém để đảm bảo rằng mọi trình duyệt sẽ không bị nhấp nháy 100% nhưng chúng tôi cố gắng nhắm mục tiêu này một cách có trách nhiệm.

Chuyển đổi dự phòng cho các trình duyệt không hỗ trợ chuyển đổi 3D có thể được định cấu hình cho từng loại chuyển đổi, nhưng theo mặc định, chúng tôi chỉ định "phai" làm dự phòng. Ví dụ, điều này sẽ thiết lập các chuyển dự phòng cho quá trình chuyển đổi slideout để "none":

$.mobile.transitionFallbacks.slideout = "none" 

Nguồn: http://jquerymobile.com/demos/1.1.0/docs/pages/page-transitions.html

Là một quan sát chung tôi nhận thấy rằng bạn đặt câu lệnh if/then bên trong xử lý sự kiện, bạn cũng có thể đặt nó bên ngoài vì vậy nếu nó không phải là một thiết bị Android sự kiện ràng buộc/bắn không bao giờ phải xảy ra.

Ví dụ:

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
<script> 
if (navigator.userAgent.indexOf("Android") != -1) 
{ 
    $(document).bind("mobileinit", function() 
    { 
     $.mobile.defaultPageTransition = 'none'; 
     $.mobile.defaultDialogTransition = 'none'; 
    }); 
} 
</script> 
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 

Answer 2

tôi có cùng một vấn đề, và không ai trong số các giải pháp trực tuyến dường như làm việc. Tôi đang thử nghiệm trên một thiên hà mini với Android 2.3.6 và thậm chí mờ dần là khủng khiếp về mặt UX.

quan trọng xung quanh với mã của tôi, ra khỏi may mắn tôi thấy rằng điều này cải thiện hiệu suất của tôi hơi

$(document).on("mobileinit", function(){ 
     $.mobile.defaultPageTransition = 'slide'; 
     $.mobile.transitionFallbacks='none'; 
}); 

Và như thể bởi phép lạ, không có thấp thoáng! Một số trục trặc xảy ra đôi khi, nhưng nó chắc chắn là tốt hơn so với trước đây!