Giao diện người dùng Jquery trông có vẻ xấu xí trước khi document.ready

Question

Các phần tử HTML hiển thị trước đó sau đó onload hoặc document.ready được kích hoạt.

Tất cả tiện ích con giao diện người dùng jQuery tải trên document.ready và làm cho trang trông xấu xí trong vài giây đầu tiên.

Tùy chọn có thể để xử lý - ẩn các phần tử trước khi chúng được đưa vào với giao diện người dùng jQuery và hiển thị chúng với JS sau khi tải. Nhưng trong trường hợp JS bị tắt - người dùng sẽ không thấy bất kỳ phần tử nào không phải là HTML chuẩn cũng như giao diện người dùng jQuery.

Phương pháp hay nhất để làm việc với ứng dụng này là gì?

Answer 1

Nếu bạn nhìn vào các tài liệu hướng dẫn jQuery UI, let's take tabs for example, nếu bạn nhìn vào Theming tab, bạn sẽ nhìn thấy các lớp học để áp dụng để tránh đèn flash của nội dung unstyled:

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs"> 
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"> 
    <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li> 
     <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li> 
    <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1"> 
     <p>Tab one content goes here.</p> 
    </div> 
    ... 
</div> 

Lưu ý: Đây không phải là các thực hành tốt nhất, nhưng nếu bạn muốn tránh hiển thị nội dung, đó là một lựa chọn, đây là khác:

bạn có thể ẩn các yếu tố thông qua CSS, cung cấp cho những gói <div> yếu tố một lớp, chúng ta hãy nói .startsUgly trong biểu định kiểu của bạn có:

.startsUgly { display: none; } 

.... và hiển thị chúng trong JavaScript, ví dụ: $(".startsUgly").show();

Sau đó, để xử lý những hoạt Javascript người tàn tật, một số <noscript> kỳ diệu:

<noscript> 
    <style type="text/css">.startsUgly { display: block; }</style> 
</noscript> 

Bằng cách này, những người có Javascript khuyết tật đơn giản không có được hiệu quả display: none, họ vẫn sẽ thấy nội dung.

Answer 2

Trước hết, các lớp UI của jQuery trong tài liệu chỉ áp dụng sau tài liệu.đã có. Bạn có thể tạo kiểu cho tất cả những gì bạn thích, nhưng bạn sẽ không loại bỏ được flash của nội dung không bị cản trở. Các lớp này rất hữu ích cho việc tạo giao diện người dùng, không ảnh hưởng đến cách mọi thứ trông trước giao diện người dùng.

Thứ hai, thẻ noscript về cơ bản là tránh được, vì nhiều lý do: 1) Nó không thực sự cho bạn biết nếu javascript là trên hay không. Ví dụ, nó có thể được kích hoạt trong trình duyệt nhưng bị chặn bởi tường lửa. 2) Đó là một thẻ cấp khối, vì vậy chỉ có một số nơi nhất định mà nó có thể xuất hiện hợp lệ. Nó không phải là một giải pháp tất cả các mục đích. 3) Thẻ không phân biệt giữa mức độ triển khai javascript trên các hệ thống khác nhau.

Bạn đã gần gũi hơn với thực tiễn tốt nhất trong bài đăng gốc của mình. Bí quyết là làm cả ẩn và hiển thị trong javascript. Trước tiên, hãy tạo kiểu cho trang của bạn để trang có thể được chấp nhận khi javascript bị tắt. Sau đó, để ngăn chặn các tia nội dung unstyled, làm ẩn các yếu tố xấu xí trong javascript trước document.ready (đây là phần quan trọng) bằng cách gán một lớp học để các yếu tố html:

jQuery('html').addClass('blahblah'); 

Vì phần tử html đã tồn tại, nó hợp lệ để làm việc với nó trước khi document.ready. Sau đó, giống như Nick nói, đưa các yếu tố vi phạm trong một div với class "startsugly" và sau đó đặt một dòng trong css của bạn mà giấu đi những yếu tố vi phạm:

.blahblah .startsugly {display: none;} 

Vấn đề ở đây là display: none chỉ phát huy tác dụng khi javascript được bật. Người dùng bị vô hiệu hóa sẽ vẫn có thể truy cập nội dung của bạn. Sau đó, sau khi document.ready, đặt trong jQuery UI của bạn "mối lái" chức năng, và hiển thị các phần tử lỗi một lần nữa:

$(".startsUgly").show(); 

mặc dù nếu đó là nội dung mà chỉ có điều kiện có thể nhìn thấy trong một accordion hoặc một cấu trúc tab, bước cuối cùng này thậm chí có thể không cần thiết.

Answer 3

$('[class*=" ui-"]').remove(); 

Answer 4

Xây dựng đề xuất thứ hai của Nick Craver - Tôi không có ý định ăn cắp câu trả lời của anh ấy, chỉ cần thêm một tùy chọn khác - bạn có thể tận dụng vẻ đẹp của Modernizr. Modernizr sẽ thêm một lớp js đơn giản vào phần tử html nếu JavaScript được bật. Vì vậy, những gì bạn có thể làm là thêm một phong cách đơn giản để style sheet chính của bạn như sau đó sẽ chỉ ẩn thân nếu JavaScript được kích hoạt (vì chúng ta phải sử dụng JavaScript sau để hiển thị cơ thể):

main.js body 
{ 
    display: block; 
} 

Và sau đó có một dòng JavaScript đơn giản như sau trong 'trang chính' của bạn:

<script type="text/javascript"> 
    $(function() 
    { 
     $("body").css("display", "block"); 
    } 
</script> 

Đó là một giải pháp tốt nếu bạn đang sử dụng Modernizr cho những thứ khác. Nếu không, nếu bạn không có sử dụng nào khác cho Modernizr, tôi sẽ đi theo gợi ý của Nick Craver.