Sự kiện trước $ (tài liệu) .ready

Question

Tôi có chức năng ẩn điều khiển có điều kiện trước khi tài liệu được tải. Nếu tôi đặt chức năng này trên $(document).ready, tôi thấy trang nhấp nháy để ẩn các điều khiển có điều kiện. Tôi muốn biết nếu có một sự kiện có thể được gọi trước khi $(document).ready được kích hoạt.

Answer 1

Như những người khác nói làm một cái gì đó như thế này

<div id="test" class="hidden"> my hidden div tag </div> 

.hidden 
{ 
display:none; 
} 

trong tài liệu.sẵn sàng, bạn có thể hiển thị, đây là tương đương với onload, mà đợi đến khi html được nạp

$(document).ready(function() { 
    $('#test').show(); 
}); 

dụ jsfiddle đây

http://jsfiddle.net/kdpAr/

Answer 2

Sự cố thường gặp. Sử dụng CSS để ẩn các điều khiển theo mặc định và sau đó sử dụng JS khi $(document).ready để quyết định các điều khiển nào hiển thị. Sẽ không có nhấp nháy. Nó sẽ chỉ trông giống như các phần thích hợp của trang đang tải dần dần.

Bạn không thể chạy JS một cách an toàn trước khi tài liệu sẵn sàng và các phần của tài liệu sẽ hiển thị trước khi bạn có thể chạy JS. Vì vậy, giải pháp duy nhất là đảm bảo tất cả các phần tử không nhấp nháy được ẩn theo mặc định và sau đó bạn chỉ hiển thị những phần tử bạn muốn hiển thị.

Cách đơn giản nhất để làm điều này là chỉ cần đặt một lớp học phổ biến trên tất cả các yếu tố năng động:

<div id="myControl1" class="initiallyHidden"></div> 

và sử dụng CSS để chắc chắn rằng tất cả họ đều bắt đầu ẩn:

.initiallyHidden {display: none;} 

Và sau đó javascript của bạn sẽ ghi đè khi nó quyết định một phần tử sẽ hiển thị:

document.getElementById("myControl1").style.display = "block"; 

Answer 3

Khi tôi đã cần thiết để che giấu một cái gì đó trước khi Javascript được nạp tôi sẽ thiết lập nó ẩn trong css như sau:

display:none; 

hay:

visibility: hidden; 

Bạn cũng có thể sử dụng điều kiện kết hợp với Javascript để lộ nó nếu cần thiết.

Answer 4

gọi hàm JavaScript trong bên cạnh yếu tố HTML

ví dụ:

<span></span> 
<script> call JS function</script> 

Answer 5

Bạn chỉ có thể mở một thẻ script ngay sau khi HTML mà bạn muốn ẩn condionnaly (jQuery phải được khai báo trước tuy nhiên) và sau đó gọi ẩn trực tiếp, không phải bên trong $ (tài liệu) .đã có như sau:

<div id="toHide">Lorem ipsum</div> 

<script type="text/javascript"> 
    $("#toHide").hide(); 
</script> 

Answer 6

Bạn phải đặt yếu tố của bạn trước khi chạy javascript của bạn

<div>hi</div> 
<script> 
$("div").css('background-color', '#EEE'); 
</script> 

http://sandbox.phpcode.eu/g/d01a1