Có chức năng "phần tử đã sẵn sàng" trong jquery không?

Question

Tôi có một phần tử có đường viền CSS và vấn đề là phần tử trống cho đến khi nội dung được lấp đầy bởi jQuery, nhưng đường viền được vẽ bởi CSS ngay từ đầu. Tôi muốn có thể làm điều gì đó như làm cho chế độ hiển thị yếu tố bị ẩn cho đến khi nó sẵn sàng hiển thị rồi hiển thị phần tử và đường viền trong một lần.

Có cách nào để đạt được điều này không?

Chỉnh sửa: mã để hiển thị nội dung được chứa bên trong

$(window).load(function() { 

} 

Answer 1

Phương pháp 1

Một phương pháp bạn có thể thử sẽ được thiết lập CSS của nguyên tố này để display:none;. Điều này sẽ ẩn phần tử và gọi hàm sau sẽ khiến phần tử hiển thị trên tải DOM.

$(document).ready(function() { 
    // Put all of jQuery code in here 
    $("element").show(); // substitute element for whatever is needed 
}); 

Tuy nhiên, tôi sẽ không đề nghị phương pháp này, vì sẽ có một bước nhảy đột ngột của nội dung khi jQuery thực hiện, bởi vì display:none; có nghĩa là sẽ không có dấu vết của các phần tử trên trang

Phương pháp 2

Phương pháp tốt nhất theo ý kiến ​​của tôi là sử dụng visibility:hidden. Điều này sẽ gây ra không gian nơi phần tử thường vẫn xuất hiện, nhưng sẽ có khoảng trắng ở vị trí của phần tử. Bằng cách đó, khi tải trang, không có một bước nhảy đột ngột nào về nội dung. Nếu bạn sử dụng phương pháp này, bạn sẽ cần phải sử dụng phương pháp .css(), vì .show() được về cơ bản thiết lập CSS của nguyên tố này để display:block; Vì vậy, các mã sẽ trông như thế này

$(document).ready(function() { 
    // Put all of jQuery code in here 
    $("element").css("visibility", "visible") // substitute element for whatever is needed 
}); 

Đối với cả hai phương pháp, CSS sẽ làm cho phần tử bị ẩn và hàm này đợi cho đến khi toàn bộ DOM được tải trước khi nó thực hiện.

Answer 2

Bạn có thể sử dụng jQuery addClass để thêm một phong cách mà được biên giới, hoặc có lẽ removeClass để loại bỏ một lớp ẩn display:none;

Và để trả lời câu hỏi tiêu đề của bạn, đó là document.ready mà bạn đang tìm kiếm!

Answer 3

Bạn có thể sử dụng

$(function(){ 
    // your code here 
}); 

Vì vậy, bên trên được thực hiện khi DOM được nạp. Bây giờ tất cả những gì bạn cần làm là hiển thị phần tử của bạn có visibility:hidden được đặt trong css.

Answer 4

Bạn đã thử .css()? Bạn có thể thay đổi css của một phần tử. Đọc thêm here.

Ban đầu, đặt làm ẩn, sau đó xóa.

Answer 5

Ẩn mục của bạn lúc đầu.

$(function(){ 
    $('selector').hide(); // Or you can just have display:none 
    }); 

Trong một số phần khác một số sự kiện điền vào div của bạn với một số nội dung

.... 
....//some code that fills in your content 
... 
$('selector').show(); 
.... 
.... 

Answer 6

Ready trên các yếu tố sẽ làm việc:

$(document.getElementsByTagName('div')[0]).ready(function() { 
// do stuff when div is ready 

Answer 7

Hãy thử điều này:

$('#element').bind("DOMSubtreeModified", function() { 
    //do stuff 
});