jQuery在加載網站/內容後淡入？

是否有任何教程或插件將網站放入視圖中，一旦它正確加載，以限制任何震動等，所以內容基本上顯示平穩？jQuery在加載網站/內容後淡入？

我想這會更容易些，如果這只是一個特定的區域，作爲頁眉或頁腳都已經被緩存，從以前的網頁...

例如各種縮略圖的組合頁面，他們只出現準備就緒時順利。

可以這樣做嗎？

謝謝你的任何幫助:)

2011-11-10 Jezthomp

是的，有一個div（例如<div id="main-content">）包裝你的內容，並在你的CSS把這個：

div#main-content { display: none; }

然後使用這個腳本。

$(document).ready(function() { 
    $('#main-content').fadeIn(); 
});

來源

2011-11-10 07:55:48

如果有人沒有啓用Javascript，是否有這種退步？ – optimus203


jQuery(document).ready(function(){ 
jQuery("#container").fadeIn(); 
});

，其中容器是包含整個內容的div ID。

來源

2011-11-10 07:57:43

首先，一個觀點：一般來說，網頁設計師花費大量時間試圖提高感知頁面加載時間，儘可能快地顯示內容。這種方式正在積極轉向，直到一切準備就緒，呈現一個空白頁面，這可能並不理想。

但如果它是適合您的情況：

既然一切可見的將是body的後裔，你可以加載body隱藏，然後在褪色，那將是非常重要的包括沒有JavaScript爲用戶提供回退（通常至少少於2％，但仍然）。因此，沿着線：

(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>

上的腳本部分一對夫婦的變化，這取決於當你想淡入發生：

等待「準備好了」事件：

Live Copy

// This version waits until jQuery's "ready" event 
jQuery(function($) { 

    $(document.body).fadeIn(1000); 

});

娃它爲window#load事件：

Live Copy

// This version waits until the window#load event 
(function($) { 

    $(window).load(function() { 
    $(document.body).fadeIn(1000); 
    }); 

})(jQuery);

window#load火災非常在頁面加載過程不遲，畢竟外部資源（包括所有圖片）已加載。但是你說你想等到所有的東西都加載完畢，所以這可能是你想要做的。它肯定會讓你的頁面看起來更慢......

來源

2011-11-10 07:57:47

好..很少有人想回想起來。對於Nice建議+1 +1 –

正確。但我仍然會把身體{display：none; }到CSS文件中，因爲我儘量避免使用這種嵌入式樣式。 –

@sushilbharwani：是的。這通常是<= 2％的訪問者（至少，這是雅虎的電話號碼）（http://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-have-javascript-disabled/ ）），但仍然... –

另一種方法是通過Animate.css項目。它的純CSS，所以沒有必要依靠JS：

https://daneden.me/animate/

就在「動畫」和「淡入」類添加到您的父元素和所有的孩子將在淡出

來源

2014-01-03 02:35:12 direct

$(document).ready(function() { 
    $('body').hide().fadeIn('fast'); 
});

來源

2015-09-29 12:24:19

jQuery在加載網站/內容後淡入？

回答

相關問題