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

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

我可以通过以下方式做得相当好：

jQuery(document).ready(function() {          

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

});

但问题是，页面在显示新的正文内容之前，会在一瞬间呈现旧的正文内容

---

是否有一种方法可以检测何时加载DOM并在打印前对其进行修改？

如果您正在等待

document.onready

，它将等待DOM准备就绪；）。不要使用它，只需将它（您的脚本）嵌入您的head标记。

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

如果您想避免这种情况，我想您可以使用CSS隐藏主体，并在完成后再次显示它：

CSS:

jQuery：

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

---

您可以通过CSS隐藏

BODY

元素内容或

BODY

元素本身：

HTML.hidden>BODY{
显示：无；
}

隐藏的

类应添加在

标题

部分的右侧（而

浏览器甚至还没有遇到打开标记）：

$（document.documentElement）.addClass（'hidden'）；

然后在

ready（）

$（文档）.ready（函数（）{
$（document.documentElement）.removeClass（'hidden'）；
});

静态隐藏
BODY
元素对于禁用JS执行的情况是不好的。
不要使用
$（文档）。准备就绪（..）
，只需将脚本直接放到页面上，最好是在定义所引用的元素之后。例如：

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

条
$（“#foo”）.html（“已加载！”）；

虽然不美观，但它确实起到了作用。
如果您无法访问页面的源代码，可以尝试以下方法：

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);

我相信我的问题是，即使当我上面的代码运行时，页面仍在继续加载，有时在我用来替换主体内容的代码运行之前，已经加载了一部分主体。有没有办法防止DOM在我的代码告诉它释放之前被显示？我仍然有一个问题，那就是加载旧的主体，然后在一秒钟后加载新的主体内容。如果你说的是真的，有些事情就不对了。不应该显示原始的主体HTML，只应该显示通过jQuery（'body'）.load（）加载的新HTML，但事实并非如此。Chrome显示旧内容的时间似乎比Firefox长。
.load
是异步的，所以在有办法强制.load同步之前删除正文吗？即使我采纳了其他人的建议，并在出现空白页面之前隐藏了正文。这确实起到了一定的作用，但在.load（）函数起作用之前，我仍然会经历一个小的空白。这就是执行AJAX请求时的延迟。如果你想避免任何延迟，你需要完全跳过AJAX并包括你的另一个页面服务器端。我不相信这对我有用，因为要使用WordPress CMS的缓存插件，我需要使用.js文件中的代码来处理主页内的动态页面加载。html内容中运行的脚本将被缓存，很难动态生成。
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);