Đầu tiên, một điểm phụ: Nói chung, các nhà thiết kế web dành nhiều thời gian để cải thiện thời gian tải trang được cảm nhận, hiển thị mọi thứ nhanh nhất có thể. Điều này tích cực đi theo cách khác, trình bày một trang trống cho đến khi mọi thứ đã sẵn sàng, có thể không lý tưởng.
Nhưng nếu nó phù hợp với tình hình của bạn:.
Kể từ khi tất cả mọi thứ có thể nhìn thấy sẽ là một hậu duệ của body, bạn có thể tải body ẩn và sau đó mờ dần nó trong Nó sẽ là quan trọng để bao gồm một dự phòng cho người dùng mà không cần JavaScript (thường ít hơn 2% ít nhất according to Yahoo, nhưng vẫn còn). Vì vậy, dọc theo dòng:
(Live Copy)
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<!-- This next would probably be in your main CSS file, but shown
inline here just for purposes of the example
-->
<style type="text/css">
body {
/* Hide it for nifty fade-in effect */
display: none;
}
</style>
<!-- Fallback for non-JavaScript people -->
<noscript>
<style type="text/css">
body {
/* Re-displays it by overriding the above */
display: block;
}
</style>
</noscript>
</head>
<body>
...content...
<script src="jquery.js"></script>
<script>
// This version runs the function *immediately*
(function($) {
$(document.body).fadeIn(1000);
})(jQuery);
</script>
</body>
</html>
Một vài biến thể trên một phần kịch bản đó, tùy thuộc vào khi bạn muốn fade-in để xảy ra:
Chờ "sẵn sàng" sự kiện:
Live Copy
// This version waits until jQuery's "ready" event
jQuery(function($) {
$(document.body).fadeIn(1000);
});
Wa điều đó cho sự kiện window#load:
Live Copy
// This version waits until the window#load event
(function($) {
$(window).load(function() {
$(document.body).fadeIn(1000);
});
})(jQuery);
window#load cháy rất trễ trong quá trình tải trang, sau khi tất cả các nguồn lực bên ngoài (bao gồm tất cả hình ảnh) đã nạp. Nhưng bạn nói rằng bạn muốn đợi cho đến khi mọi thứ đã được tải, vì vậy đó có thể là những gì bạn muốn làm. Nó chắc chắn sẽ làm cho trang của bạn dường như chậm hơn ...
Nguồn
2011-11-10 07:57:47
Có dự phòng nào trong trường hợp ai đó không bật Javascript không? – optimus203