Question

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

我能够很好地完成它：

jQuery(document).ready(function() {          

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

});

但问题是该页面会在显示新的正文内容之前暂时呈现旧的正文内容。

有没有办法可以检测DOM何时被加载并在打印之前对其进行修改？

Answer 1

如果您正在等待document.onready，它将等待dom准备就绪;）。不要使用它，只需将它（你的脚本）嵌入你的头标签。

Answer 2

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

如果你想避免这种情况，我想你可以用CSS隐藏身体并在完成后再显示：

CSS：

body { display: none; }

jQuery的：

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

Answer 3

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

Answer 4

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

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

它不漂亮，但它确实起作用。

Answer 5

如果您无权访问该页面的源代码，可以试试这个：

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内容

5 个答案: