在DOM加載並顯示在瀏覽器中之前修改正文HTML內容

我想在使用JavaScript或jQuery顯示DOM之前修改頁面的主體。在DOM加載並顯示在瀏覽器中之前修改正文HTML內容

我能夠做到這一點的相當好：

jQuery(document).ready(function() {   

    jQuery('body').load('?variation-id='+dynamic_id_number, function() {}); 

});

但問題是，頁面呈現舊的主體內容不到一秒鐘，顯示新的主體內容之前。

有沒有一種方法可以檢測DOM何時加載並在打印之前進行修改？

來源

2013-05-01 atwellpub

如果你在等待document.onready，它會等待dom準備好;）。不要使用它，只需將它（你的腳本）嵌入你的頭標籤。

來源

2013-05-01 21:08:08 Ven

我相信我的問題是，即使我上面的代碼運行後，頁面繼續加載，有時在我的代碼之前已經加載了身體的一部分，以替換身體內容可以運行。有沒有辦法阻止DOM顯示，直到我的代碼告訴它釋放？ – atwellpub 2013-05-01 21:14:52

這就是'jQuery（document）.ready'確實是 – Ven 2013-05-01 21:15:14

我仍然有問題，舊的身體被加載，然後在一秒鐘後，新的身體內容加載。如果你所說的話是真的，那麼有些東西是不對的。應該不顯示原始主體HTML，只有通過jQuery（'body'）。load（）加載的新HTML纔會顯示，但事實並非如此。Chrome似乎顯示的內容比Firefox長。 – atwellpub 2013-05-01 21:20:40

DOM在完全加載的同一瞬間完全可見。

如果你想避免這種情況，我想你可以只隱藏與CSS的身體，再次顯示它時，你就大功告成了：

CSS：

body { display: none; }

的jQuery：

jQuery(document).ready(function() {   
    jQuery('body').load('?variation-id='+dynamic_id_number, function(){ 
     jQuery('body').show(); 
    }); 
});

來源

2013-05-01 21:21:01 Blazemonger

這個功能有點用，但是我仍然經歷一個小小的白屏，直到.load（）函數工作。 – atwellpub 2013-05-01 21:30:20

這就是執行AJAX請求時的延遲。如果你想避免任何延遲，你需要完全跳過AJAX幷包含你的其他頁面服務器端。 – Blazemonger 2013-05-02 13:08:13

您可以通過CSS隱藏BODY元素內容或BODY元素本身：

HTML.hidden > BODY { 
    display: none; 
}

hidden類應加右內HEAD部分（而<body>打開標籤甚至不通過瀏覽器遇到尚未）：

$(document.documentElement).addClass('hidden');

，然後在ready()處理程序取消隱藏它：

$(document).ready(function() { 
    $(document.documentElement).removeClass('hidden'); 
});

靜態隱藏BODY元素對於禁用JS執行的情況是不利的。

來源

2013-05-01 21:24:44

而不是使用$(document).ready(..)，只需將腳本直接拖放到頁面上，最好是在定義了引用的元素之後。例如：

<div id="foo">Bar</div> 
<script>$("#foo").html("Loaded!");</script>

它不是很漂亮，但它的工作。

來源

2013-05-01 21:28:25 oomlaut

我不相信這會適用於我，因爲要使用WordPress CMS的緩存插件，我需要使用.js文件中的代碼來處理主頁面中的動態頁面加載。在html內容中運行的腳本將被緩存並很難變爲動態。 – atwellpub 2013-05-01 21:37:42

如果您沒有訪問該頁面的源代碼，你可以試試這個：

var css = 'body { display:none; background-color:white; }', 
style = document.createElement('style'); 
style.type = 'text/css'; 

if(style.styleSheet) 
{ 
    style.styleSheet.cssText = css; 
} else 
{ 
    style.appendChild(document.createTextNode(css)); 
} 

head = document.head || document.getElementsByTagName('head')[0], 
head.appendChild(style);

來源

2016-04-14 19:59:28 fsinisi90

在DOM加載並顯示在瀏覽器中之前修改正文HTML內容

回答

相關問題