66
我討厭你如何看到網頁加載。我認爲等待頁面完全加載並準備好顯示，包括所有腳本和圖像，然後讓瀏覽器顯示它會更有吸引力。所以我有兩個問題...如何讓瀏覽器等待在完全加載之前顯示頁面？
- 我該怎麼做？
- 我是一個網頁開發總noobot，但這是常見的做法？如果不是，爲什麼？
在此先感謝您的智慧！
A
回答
20
我認爲這是一個非常糟糕的主意。用戶喜歡看到進步，簡單明瞭。將頁面保持在一個狀態幾秒鐘，然後立即顯示已加載的頁面將使用戶覺得沒有任何事情發生，並且您可能會失去訪問。
一種選擇是在頁面上顯示加載狀態，而在後臺進行處理，但這通常是在網站實際上正在處理用戶輸入時保留的。
http://www.webdeveloper.com/forum/showthread.php?t=180958
底線，你至少需要展示，而頁面加載一些視覺上的活動，我想在一個時間具有小件頁面加載速度是不是所有的壞（假設你AREN做的事情會嚴重減慢頁面加載時間）。
+0
我設計了一個網站，使用輕量級的微調器，而沉重的東西正在加載 - 沉重的東西被設置爲「display：none」。一旦所有東西都加載完畢，微調器就會淡出，內容就會消失。它現在可以很好地工作，因爲微調器現在被普遍理解爲*「loading，Please wait」*。注意：它使用jQuery。 – ADTC 2015-08-29 17:55:56
3
強制性的：「使用jQuery」
我已經看到了把黑色或白色的div覆蓋在頁面頂部的一切網頁，然後將其刪除的document.load事件。或者你可以在jQuery中使用.ready 這就是說，它是我見過的最厭煩的網頁之一，我會建議反對它。
2
可以使用一些CSS隱藏一切：
#some_div
{
display: none;
}
，然後在JavaScript中一個函數分配給document.onload刪除該分區。
jQuery使這樣的事情變得非常簡單。
+6
當然，如果用戶沒有JavaScript，他們將永遠不會看到你的頁面。 – 2009-09-16 19:42:26
+1
我懇求你的赦免，刺激！ – MiseryIndex 2009-12-25 19:38:03
3
雖然這並不總是一個好主意，但您可以自由決定是否真的想這樣做。有一些不同的方法來做到這一點，我發現了一個簡單的例子在這裏：
http://www.reconn.us/content/view/37/47/
可能不是最好的一個，但它應該幫助您開發自己的解決方案。祝你好運。
0
你可以先讓你的網站的主索引頁面只包含一條消息說「加載」。從這裏開始，您可以使用ajax獲取下一頁的內容並將其嵌入當前頁面，完成後刪除「加載」消息。
您可能只能在頁面頂部包含一個寬度爲100％的加載消息容器，然後在加載完成時刪除所述的div。
後者可能無法在兩種情況下完美工作，並且取決於瀏覽器如何呈現內容。
我不是如果完全肯定是個好主意。對於簡單的靜態網站，我會說不。不過，我最近看到很多來自使用複雜動畫的設計公司的大量JavaScript網站，並且只有一頁。這些站點使用加載消息來等待加載所有腳本/ html/css，以便頁面按預期運行。
1
雖然我同意其他人不應該要它，但我只是簡單地解釋一下你可以做些什麼來做一個小小的改變，而不是一路走下去，實際上阻止已經存在的內容 - 也許這個將足以讓您和您的訪客保持愉快。
瀏覽器開始加載一個網頁，後來將處理外部位於CSS和JS，特別是如果CSS/JS鏈接到的地方是在「正確」的地方。 （我認爲建議是儘可能晚的加載js，並使用外部的css來加載標題）。現在，如果你有你的CSS和/或你想盡快地應用於JS的一些部分簡單地包含在頁面本身。這將違背YSlow等性能工具的建議，但它可能會增加顯示的頁面變化，就像您希望顯示的那樣。只有在真正需要時才使用它！
9
當然是有這個有效的使用。一種是防止人們點擊鏈接/導致JavaScript事件發生，直到所有的頁面元素和JavaScript已經加載。
在IE，您可以使用頁面過渡這意味着頁面不顯示，直到它完全加載：
<meta http-equiv="Page-Enter" content="blendTrans(Duration=.01)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=.01)" />
注意持續時間短。這足以確保頁面在完全加載之前不會顯示。
在火狐和其他瀏覽器，我使用的解決方案是創建一個DIV是頁面和白色的大小，然後在把JavaScript中隱藏在頁面的最末端。另一種方法是使用jQuery並隱藏它。不像IE解決方案那樣無痛苦，但都工作得很好。
+0
對於Firefox解決方案：禁用JavaScript的用戶呢？ – ChristopheD 2009-09-16 19:57:39
+5
@ChristopheD答案：那些關閉javascript的世界上的10個人將無法看到該頁面。 – bagofmilk 2013-10-11 14:44:14
+0
@ChristopheD似乎很多東西都依賴於JS，所以[至少對於我的網站]它無法正常工作。 – 2014-02-15 21:50:09
26
這是對所有的給出的理由，多一個非常糟糕的主意。這就是說，這裏是它的使用jQuery你怎麼做：
<body>
<div id="msg" style="font-size:largest;">
<!-- you can set whatever style you want on this -->
Loading, please wait...
</div>
<div id="body" style="display:none;">
<!-- everything else -->
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#body').show();
$('#msg').hide();
});
</script>
</body>
如果用戶禁用了JavaScript，他們從來沒有看到的網頁。如果頁面從未完成加載，他們將永遠不會看到該頁面。如果頁面加載時間過長，他們可能會認爲出現了問題，然後轉到其他地方而不是*請等待... *。
+8
解決這個解決方案的no javascript問題的一種方法是使用'
4
此外，請確保服務器緩衝頁面，並且不要立即（建設中）將其流到客戶端瀏覽器。
既然你沒有指定你的技術堆棧：
- PHP：看看ob_start
- ASP.NET：確保響應。BufferOutput = TRUE（這是默認設置）
+0
一個服務器端的方法！優秀！謝謝！ – BeachRunnerFred 2009-09-16 19:57:14
+0
請注意，雖然這將有助於發送巨大的動態構建的html頁面，但這對於「外部」鏈接的圖像和腳本/樣式表不起作用（但這些將在第一頁加載之後在瀏覽器緩存中） – ChristopheD 2009-09-16 20:01:34
9
下面是使用jQuery的解決方案：
<script type="text/javascript">
$('#container').css('opacity', 0);
$(window).load(function() {
$('#container').css('opacity', 1);
});
</script>
我把這個腳本只是我</body>標記之後。只需將「#container」替換爲要隱藏的DOM元素的選擇器即可。我嘗試了幾個變體（包括.hide()/.show()和.fadeOut()/.fadeIn()），只是設置不透明度似乎有最少的不良影響（閃爍，改變頁面高度等）。您也可以用fadeTo(100, 1)代替css('opacity', 0)以獲得更平滑的過渡。 （不，fadeIn()將不會工作，至少不會在jQuery 1.3.2下工作。）
現在的注意事項：我實現了上述，因爲我使用的是TypeKit，當刷新頁面和字體時會出現煩人的閃爍需要幾百毫秒才能加載。所以我不想在TypeKit加載之前在屏幕上出現任何文本。但是，如果您使用上面的代碼並且頁面上的某些內容無法加載，那麼顯然您遇到了麻煩。有兩個明顯的方式，它可以改進：
- 最大時間限制（比如，1秒）之後，一切都將出現在頁面是否加載與否
- 某種類型的負荷指標（比如，東西from http://www.ajaxload.info/）
我不會在這裏實施加載指示器，但時間限制很容易。只需將其添加到上面的腳本中：
$(document).ready(function() {
setTimeout('$("#container").css("opacity", 1)', 1000);
});
所以現在，最壞的情況下，您的頁面將需要多出一秒。
+0
除了方法我剛剛發佈了一個答案來處理禁用JavaScript和推遲CSS加載。謝謝Trevor。 – RafaSashi 2015-02-19 09:47:24
3
緊隨你的< body>標籤中添加這樣的事情...
<style> body {opacity:0;}</style>
併爲您的<頭的第一件事>添加類似...
<script>
window.onload = function() {setTimeout(function(){document.body.style.opacity="100";},500);};
</script>
由於這是好的做法還是壞的取決於你的訪問者，以及等待的時間。
這個問題仍然存在，我沒有看到任何答案是如何確保頁面已經穩定。例如，如果您要加載字體，則頁面可能會重新排列一點，直到加載並顯示所有字體。我想知道是否有事件告訴我該頁面已完成渲染。
0
我知道這是一個古老的線程，但仍然。另一個簡單的選擇是這個庫：http://gayadesign.com/scripts/queryLoader2/
0
不要使用顯示：無。如果你這樣做，當你做show（）時你會看到圖像的大小調整/重新定位。使用可見性：隱藏，而不是正確放置所有東西，但它只是直到你告訴它纔會顯示。
2
除了特雷弗Burnham的答案，如果你想處理disabled javascript和defer css loading
HTML5
<html class="no-js">
<head>...</head>
<body>
<header>...</header>
<main>...</main>
<footer>...</footer>
</body>
</html>
CSS
//at the beginning of the page
.js main, .js footer{
opacity:0;
}
JAVASCRIPT
//at the beginning of the page before loading jquery
var h = document.querySelector("html");
h.className += ' ' + 'js';
h.className = h.className.replace(
new RegExp('(|^)' + 'no-js' + '(|$)', 'g'), ' ').trim();
JQUERY
//somewhere at the end of the page after loading jquery
$(window).load(function() {
$('main').css('opacity',1);
$('footer').css('opacity',1);
});
資源
1
在PHP-Fusion技術的開源CMS，http://www.php-fusion.co.uk，我們做這樣的核心 -
<?php
ob_start();
// Your PHP codes here
?>
YOUR HTML HERE
<?php
$html_output = ob_get_contents();
ob_end_clean();
echo $html_output;
?>
您將無法看到一個接一個地加載。唯一的加載程序將是您的瀏覽器選項卡微調器，並且它在加載完所有內容後立即顯示所有內容。試一試。
此方法完全符合html文件。
0
希望這個代碼將有助於
<html>
<head>
<style type="text/css">
.js #flash {display: none;}
</style>
<script type="text/javascript">
document.documentElement.className = 'js';
</script>
</head>
<body>
<!-- the rest of your code goes here -->
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript">
// Stuff to do as soon as the body finishes loading.
// No need for $(document).ready() here.
</script>
</body>
</html>
+1
請描述此代碼如何可能有所幫助。 – 2017-07-30 07:55:28
相關問題
- 1. Java SWT瀏覽器：等待動態頁面完全加載
- 2. 如何讓Selenium在執行click（）命令之前等待頁面完全加載
- 3. 在頁面完全加載之前顯示加載圖像
- 4. 在向瀏覽器發送響應之前，Varnish等待整個頁面加載
- 5. Webkit.Net等待要完全加載頁面
- 6. 在頁面加載時，如何讓我的瀏覽器全屏？
- 7. 在顯示之前完全加載新頁面
- 8. 如何等待頁面加載完成？
- 9. 如何在Automation Anywhere中完全加載網頁之前添加等待/延遲？
- 10. 等待圖像加載之前顯示
- 11. 等待一切加載之前顯示
- 12. C＃如何在繼續之前等待網頁完成加載
- 13. C＃WPF：等待網頁瀏覽器加載頁面
- 14. 如何在頁面完全加載之前讓量角器檢查元素？
- 15. Chrome瀏覽器和IE瀏覽器不會等待頁面加載之前採取屏幕截圖
- 16. 如何在iframe完全加載之前顯示加載圖標？
- 17. 如何在繼續執行腳本之前等待網頁完全加載？
- 18. C＃讓程序等待，直到瀏覽器完成加載網頁
- 19. 機器人：如何在繼續之前等待加載完成？
- 20. WPF在應用程序完全加載之前顯示等待遊標
- 21. C＃Webclient.DownloadString（） - 如何等待頁面下載之前加載？
- 22. 如何讓Selenium WebDriver不要等待頁面的完整加載
- 23. 如何在獲取元素之前等待頁面加載？
- 24. 使頁面加載時使谷歌瀏覽器全屏顯示
- 25. 如何在DotNetBrowser打印之前等待淘汰頁面完成加載？
- 26. 爲什麼瀏覽器等待結束加載頁面？
- 27. 如何顯示等待gif，直到圖像完全加載
- 28. 在顯示頁面之前完全下載圖片
- 29. 在模板渲染之前等待Meteor.user（）完全加載
- 30. 在Python中強制Selenium以等待瀏覽器完成加載
我不喜歡怎樣，直到一切都被加載某些頁面不顯示任何東西。不要錯誤地認爲用戶的想法和你一樣。 – 2009-09-16 19:34:06
Facebook做到了這一點，它只是讓我生氣。 – 2009-09-16 19:36:29
如果你這樣做，至少確保你立即顯示一條消息說網頁正在加載.. – 2009-09-16 19:37:22