在DOM加载并显示在浏览器中之前修改body HTML内容

Modifying body HTML content before DOM is loaded and displayed in browser

本文关键字：修改 body 内容 HTML DOM 加载 显示 浏览器      更新时间：2023-09-26

我试图在使用JavaScript或jQuery显示DOM之前修改页面主体。

我可以做得很好:

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

但是问题是页面在显示新的主体内容之前会先呈现旧的主体内容。

是否有一种方法可以检测何时加载DOM并在打印之前修改它?

如果您正在等待document.onready，它将等待dom准备好;)。不要使用它，只需将它(你的脚本)嵌入到你的head标签中。

DOM在完全加载的同时是完全可见的。

如果你想避免这种情况，我想你可以用CSS隐藏正文，并在完成后再次显示:

CSS: 

body { display: none; }
jQuery: 

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

您可以通过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执行的情况是不好的。

不使用$(document).ready(..)，而是直接将脚本放到页面上，最好是在被引用的元素被定义之后。例子:

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

如果您无法访问页面的源代码，您可以尝试:

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);
相关文章：