Dừng javascript nhấp nháy khi nội dung của trang bị thao tác?

Khi tôi làm cho các trang web có javascript điều khiển trang và thao tác này xảy ra khi tải trang, tôi thường nhận được hiệu ứng nhấp nháy khó chịu.Dừng javascript nhấp nháy khi nội dung của trang bị thao tác?

Ví dụ: nếu tôi có một accordion, toàn bộ nội dung sẽ cần phải được tải dưới dạng html, và sau đó khi tải nó có thể được bao bọc bằng javascript. Điều này có nghĩa là trong giây lát toàn bộ nội dung hiển thị, và sau đó nó 'nhấp nháy' khi một số nội dung bị ẩn.

Một giải pháp là ẩn mọi nội dung nhấp nháy bằng css và sau đó hiển thị nội dung (nếu cần) với javascript. Vấn đề là sau đó trang sẽ không hoạt động đúng cho những người không có javascript.

Có cách nào tốt hơn không? Cảm ơn

Nguồn

2011-06-28 Evans

Bạn đang sử dụng chính xác sự kiện nào để khởi tạo javascript của mình? Có onLoad không? – rciq

Tôi nghĩ rằng cách tiếp cận bình thường này là thêm một lớp 'js' với cơ thể càng sớm càng tốt:

<!doctype html> 
... 
<body> 
<script>document.body.className='js';</script>

Sau đó bạn muốn áp dụng một số quy tắc CSS để đảm bảo nội dung được ẩn khi JS có sẵn , cái gì đó như.

.js .accordion:nth-child(n+1) { display: none }

Nguồn

2011-06-28 11:12:35 searlea

Đây hoàn toàn là giải pháp tốt nhất. Chức năng sẵn sàng của jQuery đợi cho tới khi DOM hoàn toàn ... sẵn sàng. Nếu bạn muốn thực hiện nhanh chóng trên một yếu tố, thì đây là con đường để đi tôi nghĩ. –

Một cách hay là sử dụng document ready function in Jquery.

Nguồn

2011-06-28 11:09:39

Kiểm tra this excellent article bởi Paul Irish - về cơ bản là đảo ngược phương pháp bạn mô tả, ẩn với CSS cho đến khi JS tải. Bằng cách thêm <script>document.documentElement.className += 'js';</script> vào đầu, về cơ bản bạn sẽ có được những lợi ích của việc ẩn nội dung chưa được đặt trước khi DOM sẵn sàng và cũng không gây rối cho những người không có Javascript.

Nguồn

2011-06-28 11:12:39

Nếu bạn thay đổi thuộc tính css sau khi tải trang của bạn, việc nhấp nháy đó sẽ xảy ra. Cách tốt nhất để làm cho css có cùng thuộc tính mà javascript thao tác nó vào. Bằng cách đó, bạn cũng làm cho trang của mình hiệu quả hơn bằng cách bỏ qua các biểu tượng bổ sung/tô màu trong trình duyệt. Tuy nhiên một hack là phải có javascript giảm thiểu và tải nó trước khi tải dòng css của bạn.

Nguồn

2011-06-28 11:13:25

-1

Không có cách nào tốt hơn để thực hiện việc này sử dụng tính năng nâng cao tiến bộ. Tại một số điểm bạn sẽ cần phải tải toàn bộ trang và sau đó sử dụng javascript để ẩn những gì bạn không muốn nhìn thấy. Tuy nhiên, vì javascript chỉ có thể thực thi trên DOM khi nó đã được viết, bạn phải đợi cho nó được viết trước khi bạn có thể ẩn nó. Nó có vẻ phản trực giác, nhưng có bạn đi. Đó là giá mà chúng tôi phải trả cho việc thao tác DOM :-)

Nguồn

2011-06-28 11:13:25 Alex

Bạn có thể thực thi JS ngay cả trước khi DOM hoàn toàn sẵn sàng. Searlea có câu trả lời dưới đây. –

Dừng javascript nhấp nháy khi nội dung của trang bị thao tác?

Trả lời

Các vấn đề liên quan