2

我正在尝试在使用 JavaScript 或 jQuery 显示 DOM 之前修改页面的正文。

我能够很好地做到这一点：

jQuery(document).ready(function() {          

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

});

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

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

4

5 回答 5

4

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

于 2013-05-01T21:08:08.560 回答
1

您可以通过 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-01T21:24:44.547 回答
1

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-01T21:21:01.367 回答
0

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

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

它不漂亮，但它可以完成工作。

于 2013-05-01T21:28:25.260 回答
0

如果您无权访问该页面的源代码，可以尝试以下操作：

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-14T19:59:28.363 回答