Question

我正在使用jQuery来修改大量现有网页中某些页面的样式。这样可行，但我遇到的问题是，对于较长的页面，在javascript启动并转换页面之前，页面会以错误的样式短暂显示。

我正在使用这种东西（警报只是为了强调问题）：

$(document).ready(function(){
   ...
   alert("at this point the page is visible unstyled");
   $('body').addClass('myStyle');
   alert("now page looks like I want it to");
   ...
}

在 $（文档）.ready（function（）完成之前，如何阻止浏览器显示页面？

编辑
注意：我无法更改页面的HTML（它们不是我的）。我所能做的就是交换一个替换的JavaScript文件并使用HTML中已有的内容

Answer 1

使用<div id="wrap" style="display: none"></div>包裹所有内容，然后在domReady处理程序的末尾添加$('#wrap').css('display', '');

如果您无法更改HTML，请在脚本中尝试：

$('body').css('display', 'none');

$(document).ready(function(){
   ...

   $('body').css('display', '');
}

Answer 2

var blanky = document.createElement("div");  
blanky.style.width = "100%";  
blanky.style.height = "100%";  
blanky.style.position = "absolute";  
blanky.style.top = "0px";  
blanky.style.left = "0px";  
blanky.style.backgroundColor = "white";  
blanky.id = "blanky";  
document.body.appendChild(blanky);

现在你加载了所有东西后，就这样做了;

document.getElementById（“blanky”）。style.display =“none”;

加载body元素后立即执行此操作。如果您的脚本无论如何都在body元素内，请不要附加任何事件。如果它在头部，你应该使用ready事件。

这也允许你将几乎所有内容放入div中，例如，加载屏幕！

Answer 3

如果您没有任何AJAX，以下就足够了：

（<body>标记之前）

body {
    display: none;
}

（加载jQuery库之后）

$(document).ready(function(){

   // Other code here

   $('body').css('display', 'inline');
}

但是当你做有AJAX时，隐藏身体直到加载完成有时甚至更有用，所以上述是不够的。

Javascript按顺序执行代码，但在继续之前不会等待异步任务完成。因此，如果替换// Other code here占位符的代码是异步的，则在完成之前将显示正文，这会隐藏隐藏正文的目的。

您可以克服的一种方法是使用回调函数。例如，您可以将.always用作AJAX的一部分：

$('body').css('display', 'none');

$(document).ready(function(){

   $.ajax(

       // AJAX of some sort e.g. loading a Google Map.

   ).always(function() {

       $('body').css('display', 'inline');

   });

}

在尝试使用AJAX之前，.always处理程序函数不会执行。

但它并不以AJAX结尾，我建议您查看deferred object。

jQuery：如何处理页面直到它被处理？

3 个答案: