在渲染頁面之前加載javascript？
[英]Load javascript before rendering page?
問題描述
我想在我的頁面加載之前運行一些jquery代碼。 我添加了一些使用javascript更改css的類，當頁面加載時，我會在短時間內看到“舊”css。 有任何想法嗎？ 謝謝
5 個解決方案
解決方案1
34 已采納 2011-04-12 22:18:51
我想在我的頁面加載之前運行一些jquery代碼。
這很容易做到; 這很有趣，因為很多時候，人們都試圖以相反的方式去做。
當瀏覽器遇到script標記時，禁止使用幾個特殊屬性（以及支持它們的瀏覽器），頁面的所有處理都會暫停，瀏覽器會將腳本交給JavaScript引擎。 僅在腳本完成時才繼續處理頁面。
因此，如果頁面的head部分中有script標記，則可以通過document.write函數輸出CSS類：
<DOCTYPE html>
<html>
<head><title>Foo</title>
<script src='jquery.js'></script>
<script>
if (some_condition) {
document.write("<style>foo { color: blue; }</style>");
}
else {
document.write("<style>foo { color: red; }</style>");
}
</script>
請注意，上面的some_condition只能依賴並引用文檔中它上面的項目（因為瀏覽器還沒有對文檔的其余部分做任何事情，因為它正在等待查看什么document.write內容腳本將輸出）。
實例 （刷新幾次，一半是紅色，一半是藍色）。 它不使用jQuery，但你明白了。
解決方案2
5 2016-04-08 01:24:42
基本上它與實現加載器/微調器類似。 您向用戶顯示動畫gif，當頁面最終加載時，您將其刪除。
在這種情況下，我們顯示空白，而不是顯示gif。
有多種方法可以實現這一結果。 在易用性和性能方面，有幾個訂購。
全局CSS規則 。
隱藏全局CSS文件中的body。body { display:none; }文檔完成加載后，切換顯示：
// Use 'load' instead of 'ready' cause the former will execute after DOM, CSS, JS, Images are done loading $(window).load(function(){ $(body).show(); });帶有div圖層的封面
使用位於頁面頂部的div隱藏內容，稍后將其刪除。div#page_loader { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: white; z-index: 100; }JavaScript代碼段
在頁面呈現之前隱藏body：<body onload="document.body.style.display='none';">
如果您使用Modernizr ，您還可以利用其CSS類隱藏/顯示內容，具體取決於用戶的設備或瀏覽器。
但是我不建議這樣做，它在頁面頂部運行jQuery腳本，這會增加額外的負擔，並延遲進一步的頁面渲染。
解決方案3
5 2011-04-12 22:15:08
假設您已在主體上使用onLoad事件或使用jQuery ready回調，則可以從style =“display：none;”開始。 在你的根div上，做你的JS東西，最后在你准備公開內容時在那個div上設置“display：block”。 瞧？
解決方案4
-2 2012-03-27 06:41:00
在呈現頁面之前刪除css：
（我使用它來從表中刪除Css突出顯示，並使用WORKS！）
<script type="text/javascript">
function removeHighlight(){
var elm = $("#form_show\\:tbl_items tr");
elm.removeClass('ui-state-highlight');
}
$(document).ready(function(){
removeHighlight();
});
</script>
解決方案5
-10 2011-04-12 22:15:14
將您的代碼放入文檔准備就緒。 在加載DOM之后和加載頁面內容之前，其中的所有內容都將加載
$(function(){
your code goes here...
});
要么
$(document).ready(function(){
your code goes here..
});
Javascript頁面加載時呈現數組
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.