Tải trước và chạy jQuery/javascript trước khi xem trang

Question

Tôi đang làm việc trên một dự án có khá nhiều jQuery đang diễn ra. Vì vậy, khi tôi truy cập trang, tôi có thể xem chạy jQuery (ví dụ: $.button() yếu tố trên trang vẫn xuất hiện dưới dạng phần tử html bình thường và thực hiện, nó trông "đẹp".

Nó không chỉ là trường hợp tải trước hình ảnh hoặc bất cứ điều gì, tôi muốn chạy mã jQuery, nhưng "ẩn" nó từ khách truy cập để một khi trang được mở, nó trông "đẹp" ngay lập tức HOẶC hiển thị một màn hình màu đen nói "Đang tải ..." cho đến khi jQuery chạy xong. Hãy xem ở đây: http://www.filamentgroup.com/, mặc dù tôi không chắc chắn rằng thực sự chạy javascript của trang web trước khi hiển thị nó, nhưng nó cho thấy ý tưởng cơ bản của việc có một màn hình tối nói "Đang tải ..." .. Tôi nghi ngờ điều đó những gì xảy ra trong các ứng dụng web lớn như SlideRocket mặc dù nó không sử dụng đèn flash ...: S

Answer 1

Bạn đã trả lời câu hỏi cho mình. Có một số loại màn hình tải ẩn trang cho đến khi tất cả các jQuery được chạy.

Hãy thử một cái gì đó như sau.

này đi ở phía trên cùng của trang của bạn:

<div id="loadingMask" style="width: 100%; height: 100%; position: fixed; background: #fff;">Loading...</div> 

Dưới đây là jQuery của bạn:

$(document).ready(function() { 

    /* 
    * ... all of your jQuery ... 
    */ 

    // At the bottom of your jQuery code, put this: 
    $('#loadingMask').fadeOut(); 
}); 

Answer 2

quấn tất cả jQuery mà bạn muốn "cài đặt sẵn" vào này:

$(window).load(function() { 
    //Your jQuery here 
}); 

hoặc cách khác, không phải tất cả mã jQuery của bạn bên trong trình bao bọc đó. Thay vào đó, hãy đặt các thay đổi jQuery DOM của bạn vào một số

$(document).ready(function(){ 
    //jQuery 
})) 

và sau đó có một trình bao bọc cho tất cả nội dung trang web của bạn.

<div id="everything-wrapper"> 
    <!-- put your body here --> 
</div> 

và thiết lập hiển thị không ai sánh kịp trong CSS của bạn

#everything-wrapper { 
    display : none; 
} 

và sau đó với tải cửa sổ như trước

$(window).load(function() { 
    $("#everything-wrapper").show(); 
    // or 
    $("#everything-wrapper").fadeIn("fast"); 
    // to be fancy with it 
}); 

Answer 3

tôi sẽ có một lớp phủ như là một phần của CSS tĩnh của bạn và HTML, sau đó khi JQuery tải qua

$(document).ready() bạn có thể ẩn lớp phủ

Answer 4

Câu trả lời của Chr istopher rất có thể là cách FilamentGroup làm điều đó. Bạn có thể có javascript "được tải trước", nó tải nội tuyến với phần còn lại của trang và do nó thường lớn hơn phần còn lại của trang mất nhiều thời gian để tải xuống hơn. Bạn không thể làm cho tải javascript đầu tiên, đó không phải là cách nó hoạt động.

Tuy nhiên, nguyên tắc làm cho nó hoạt động là "ẩn" trang của bạn khỏi chế độ xem CSS (hoặc với kiểu nội tuyến như CSS sẽ vẫn phải tải) sau đó mọi thứ đã sẵn sàng trong javascript sẽ hiển thị lại tất cả. Nếu bạn nhận thấy có một khoảng cách giữa trang hiển thị (không có gì) và tải javascript hiển thị trên FilamentGroup.Đó là bởi vì họ ẩn trang, trình nạp javascript tải, sau đó một khi phần còn lại của javascript đã hoàn thành, nó ẩn bộ nạp và hiển thị trang.

Answer 5

Dude, tôi đã đưa bạn lên một mẫu. Tôi hy vọng bạn thích. Tôi sử dụng một cái gì đó như thế này trên trang web của riêng tôi. http://jsfiddle.net/jMVVf/

Answer 6

Tôi đã gặp sự cố tương tự với một tạo tác xuất hiện nhanh trong khi tải trang trong IE8. Giải pháp tôi đã sử dụng là thay đổi mức hiển thị của vùng chứa để ẩn ở dòng 1 của css. Sau đó hiển thị phần tử ở cuối tệp jquery. Nếu css và jquery bắt đầu tranh cãi, phần tử không được hiển thị cho đến khi đối số được giải quyết.