隱藏所有內容，直到頁面加載完成

我希望隱藏頁面上的所有內容，直到頁面加載完成。我看過很多帖子，嘗試過不同的東西。偉大的工程，最常見的解決方案是隱藏所有內容，直到頁面加載完成

<body style="display:none;">

然後運行了jQuery在窗口負荷再次顯示

$(window).load(function() { 
    $("body").fadeIn("slow"); 
});

我有這樣一個問題，因爲頁面是依賴於JS來顯示什麼在所有。我很欣賞這是一件罕見的事情，但只是感覺不對。

理想我想使用jQuery添加顯示：無CSS以及

然而

...

問題是，當我添加

$(document).ready(function { 
    $(body).css('display', 'none'); 
});

即使這需要一段時間運行並且頁面會先用內容閃爍。

有沒有更好的方法？

我可以用上面的腳本沒有的document.ready（試過，但沒;噸工作）

感謝。

來源

2014-02-28 Pete Norris

檢查此：http://www.inwebson.com/demo/jpreloader-v2/ – caramba

http://stackoverflow.com/a/3629799/3058754 –

嘗試將JS放在''之後並且不使用jQuery（這需要先載入jQuery）。 –

試試這個

$('#domelement').css('opacity', 0); 
    $(window).load(function() { 
     $('#domelement').css('opacity', 1); 
    });

替換「一個DOMElement」與DOM元素（S）的選擇要隱藏，直到加載

來源

2014-02-28 12:44:53 CodeFanatic

如果我必須這樣做，那麼我會做這種方式：

body{ display:none; }

然後使用jQuery：

在CSS我會藏起了身體

$(window).load(function() { 
    $("body").fadeIn("slow"); 
});

雖然你已經張貼這樣的：剛BODY標籤後聲明

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

來源

2014-02-28 12:45:08 Jai

要使用JavaScript隱藏，設置腳本：

$(document).ready(function() { 
    $(body).css('display', 'none'); // $(body) is missing the quotes 
});

你可以試試這個

<body> 
    <script>document.body.style.display = "none";</script>

這種方式如果javascript禁用，BODY仍顯示爲

來源

2014-02-28 12:45:52

試試這個例子。http://jsfiddle.net/iashu/AaDeF/

<div id="loading"></div> 

<div id="container"> 
    container content.... 
</div>

jQuery的

$(window).load(function() { 
    //show(); 
}); 


function show() { 
    $('#loading').hide(); 
    $('#container').fadeIn(); 
}; 

setTimeout(show, 3000);

來源

2014-02-28 12:47:25

我用它有一個js類和hidden-until-ready類的方法。如果有js類，我的隱藏直到準備好的樣式纔會應用。

e.g

.js .hidden-until-ready { 
    visibility: hidden; 
}

如果瀏覽器支持JavaScript的js類是在開始應用。

document.documentElement.className = document.documentElement.className + ' js';

然後在jQuery中，我一旦加載頁面就刪除hidden-until-ready。

jQuery(document).ready(function() { 
    jQuery('.hidden-until-ready').removeClass('hidden-until-ready'); 
});

這樣，頁面的元素只有在啓動JavaScript時纔會隱藏起來，一旦頁面加載後元素再次可見。

來源

2014-02-28 12:48:37

我會做以下

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.js"></script> 
<style> 
     .hidden { 
      display: none; 
     } 
    </style> 
</head> 
<body class="hidden"> 
    this is the body... 



    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $("body").removeClass('hidden'); 
     }); 
    </script> 
</body> 
</html>

所以把它隱藏在標題內聯CSS（所以它會立即生效，而不是遭受獲取外部文件的等待時間），然後隨緣吧在Javascript。注意：這不是使用內聯CSS和JS的最佳實踐，但應該給您最低的延遲，因此不會有閃光燈的可見性。

來源

2014-02-28 12:53:10 LDJ

給課堂上課，並將其CSS設置爲「display：none」; 然後把代碼前的「身體」標籤

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

那麼，它會被隱藏，頁面加載後，它會顯示你所提到的來了，因爲當時的jQuery隱藏身體

來源

2014-02-28 12:56:40

閃爍，瀏覽器將開始繪製dom。更好的解決方案是用css隱藏它，這應該避免在頁面加載時顯示任何東西，然後你可以取消隱藏jquery.load內部的body（）

來源

2017-07-23 17:03:14

隱藏所有內容，直到頁面加載完成

回答

相關問題