隱藏頁面，直到一切已加載高級

我的目標是隻顯示一切準備就緒的頁面。

因此，我想避免顯示給用戶煩人的頁面呈現。

這個我試過到目前爲止（#body_holder裏面體包裝）：

$(function(){ 
    $('#body_holder').hide(); 
}); 
$(window).load(function() { 
    $("#body_holder").show(); 
});

這工作完全正常，但食堂的佈局。

問題是隱藏包裝會干擾使用的其他jQuery函數和插件（例如layout-plugin）。

所以我想必須有另一個技巧來做到這一點。也許躺在身上的圖片或div，直到window.load發生？

你使用什麼方法？

編輯：

溶液最可能必須是另一種方式比display:none或hide();

來源

2012-03-03 Email

你有沒有想過使用CSS來應用display：none到#body_holder，然後使用$（document）.ready（function（）{$（「＃body_holder」）。顯示（）; }）;在DOM準備好之後將其納入願景？ – Ohgodwhy 2012-03-03 23:26:22

如果您在HTML中指定圖片大小，那麼當頁面加載時，頁面將不會如此煩人地「跳躍」。如果你這樣做，渲染可能會比不必等到一切都被加載之後才能看到或做任何事情。請重新考慮你是否真的想要這樣做。 – GolezTrol 2012-03-03 23:27:28

@Ohgodwhy是的。這實際上是我第一次嘗試。顯示：身體上沒有。但它與我的例子相同。問題依然如此。它隱藏起來，但顯示佈局和所有其他的東西都搞砸了。 – Email 2012-03-03 23:28:28

任何與jQuery做的事通常都要等待document.ready，這太遲了恕我直言。

把一個div放在上面，像這樣：

<div id="cover"></div>

設置一些樣式：

#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999;}

與JS隱藏它，當所有的元素都裝：

$(window).on('load', function() { 
    $("#cover").hide(); 
});

或者如果由於某種原因，你的腳本使用更長的時間，然後加載DOM元素，設置一個時間間隔來檢查某些函數的類型t加載速度最慢，並且在定義所有功能時移除封面！

$(window).on('load', function() { 
 
    $("#cover").fadeOut(200); 
 
}); 
 

 
//stackoverflow does not fire the window onload properly, substituted with fake load 
 

 
function newW() 
 
{ 
 
    $(window).load(); 
 
} 
 
setTimeout(newW, 1000);

#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999; 
 
    font-size: 60px; text-align: center; padding-top: 200px; color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<ul> 
 
    <li>This</li> 
 
    <li>is</li> 
 
    <li>a</li> 
 
    <li>simple</li> 
 
    <li>test</li> 
 
    <li>of</li> 
 
    <li>a</li> 
 
    <li>cover</li> 
 
</ul> 
 

 
<div id="cover">LOADING</div>

來源

2012-03-03 23:32:23 adeneo

thx。試過。看我的編輯。 – Email 2012-03-03 23:47:58

這不是你的包裝，它是一個定位固定的新元素，並且具有很高的z-index，你可以將元素放置在代碼中的任何位置，它會覆蓋你的網站，直到它被JS刪除，這意味着您可以保持其他網站元素可見，但由「封面」元素覆蓋。 – adeneo 2012-03-03 23:50:20

@Email - 添加小提琴！ – adeneo 2012-03-04 00:02:33

-1

如果你有一個div #bodyholder，那麼你可以把顯示：沒有在你的CSS它，然後使用jQuery做：

$(document).ready(function() { 
    $('#body_holder').show(); 
});

我不明白爲什麼隱藏一個div應與負載干擾任何事情，因爲它意味着它是隱藏的。然而，如果你有很多的jQuery被使用，那麼確保你將它包裝在$（document）.ready中，這將確保DOM在Javascript執行之前完全加載

另一點是HTML/CSS專爲漸進式加載而設計，如果您正確地做到了這一點，那麼您可以爲用戶獲得不斷遞增的內容加載。我個人不希望我的用戶在幾秒鐘內獲得白屏，直到所有內容都加載完畢。將您的Javascript移動到頁面末尾，以便它不會阻止加載並儘快將內容呈現在屏幕上。

來源

2012-03-03 23:28:05 christophmccann

嗨。這和我的例子完全一樣。如果dom準備好了，css只能隱藏div。這是我第一次嘗試用css做隱藏。問題顯然保持不變。我的jQuery改變佈局並隱藏div的。我例如使用http://layout.jquery-dev.net/。 show（）的頁面被搞亂了。我真的尋找一種優雅的方式來以某種方式覆蓋包裝。 – Email 2012-03-03 23:33:43

佈局插件需要能夠設置尺寸，所以隱藏主要內容元素將不是一個好主意 – charlietfl 2012-03-03 23:51:27

@ charlietfl THANX您實際上是第一個在這裏考慮這一點的人。我現在在我的問題上大膽地做了。 – Email 2012-03-03 23:52:31

你應該嘗試設置知名度，隱藏的，而不是顯示：無。將可見性設置爲隱藏將保留所有元素的位置和維度，因此它不應該創建佈局問題。

來源

2012-03-04 00:10:47

這是光滑的和工作。感謝+1。我希望它是跨瀏覽器有效的。 – Email 2012-03-04 01:05:13

加載頁面時，document.style.visibility元素無法設置（直到以後它才爲null）。不過，我的老闆給我看，你可以設置document.style.opacity = 0. – Colin 2017-12-12 01:03:33

這裏是爲那些尋找一個jQuery解決方案：

隱藏身體用CSS然後顯示在頁面加載後：

CSS：

html { visibility:hidden; }

的JavaScript

$(document).ready(function() { 
    document.getElementsByTagName("html")[0].style.visibility = "visible"; 
});

當頁面加載時，頁面將從空白處顯示所有內容，不會顯示fla內容的sh，沒有看圖像加載等。

來源

2015-01-24 20:06:16 hawkeye126

我認爲如果你使用jQuery沒有缺點。 – PascalVKooten 2016-01-10 17:33:10

$是jQuery不是純JavaScript的。 – 2016-02-11 17:22:21

許多最新的解決方案 - 使用'html'元素的'visibility'屬性本身消除了對包裝工具的需求。 – Velojet 2017-11-27 02:32:12

隱藏頁面，直到一切已加載高級

回答

相關問題