如何在加载javascript之前格式化网页

嗯。我正在使用html和javascript在github上创建一个网站。早些时候，我用一个模板制作简单的格式化网页。我让它工作，但它有一个恼人的错误：未格式化的网页显示在格式化的网页之前。我使用的是谷歌托管的最新版本jquery（2.1.4）和下面的javascript：

var heading = document.getElementById("heading").innerHTML;
var pghead = document.getElementById("pghead").innerHTML;
var pgtext = document.getElementById("pgtext").innerHTML;
var template = function () {
  var tmp = null;
  $.ajax({
      'async': false,
      'dataType': 'html',
      'url': "https://jediguy13.github.io/template.html",
      'success': function (data) {
          tmp = data;
      }
  });
  return tmp.split("derp");
}();
document.write(template[0] + heading + template[1] + pghead + template[2] + pgtext + template[3]);
document.getElementById("heading").innerHTML = "";
document.getElementById("pghead").innerHTML = "";
document.getElementById("pgtext").innerHTML = "";

下面是一个示例网页：

<div id="heading">Test</div>
<div id="pghead">Test</div>
<div id="pgtext">This is some text in the main body of the webpage</div>

测试
试验
这是网页主体中的一些文本

正如您从

'async'：false中所看到的那样。

行中，Jquery正在请求模板网页，同时请求主线程。但是，在格式化过程中总是会有一点延迟。我打赌这是因为

document.write

在接近末尾时被调用。让浏览器只显示格式化页面的更好方法是什么

---

示例页面：

好的，首先我要说的是，除非您托管的是一个页面应用程序，否则您不应该依赖JS来格式化整个页面，即使这样。。。可能不是整个页面

---

要回答您的问题，不显示未格式化页面的唯一方法是在页面加载之前隐藏内容。给出您的

正文

标签或容器

style='display:none；'然后当你的JS完成执行后，通过调用类似于
$（'body'）.show（）
的东西来显示内容。好的，首先我要说的是，你不应该依赖JS来格式化你的整个页面，除非你托管的是一个单页应用程序，甚至。。。可能不是整个页面

要回答您的问题，不显示未格式化页面的唯一方法是在页面加载之前隐藏内容。给出您的
正文
标签或容器
style='display:none；'
然后在JS完成执行后，通过调用类似于
$（'body'）的内容来显示内容。show（）
不要使用
文档。write（）
。曾经如果您有HTML代码段，只需将其附加到所需节点，如下所示：

$("body").html(template[0] + ...);

$("body").hide();
// ... make AJAX call and attach it as shown above
$("body").fadeIn();

如果页面最初是空的，并且所有内容都是用AJAX加载的，那么您将看到一个白色页面，该页面将填充您的代码

在您的情况下，它不会像我猜的那样是空的，因此您必须在获取HTML后立即清除它：

heading = $("#heading").html();
$("#heading").html("");

这将最小化HTML的原始暴露

此时，您可能希望慢慢淡入，如下所示：

$("body").html(template[0] + ...);

$("body").hide();
// ... make AJAX call and attach it as shown above
$("body").fadeIn();

fadeIn（）

使AJAX调用异步，并将所有这些都放入AJAX
success（）
方法中

这是一个完整的重写。只需复制并粘贴，然后告诉我它是否有效：

var heading, pghead, pgtext;

$("body").hide();

heading = $("#heading").html();
pghead = $("#pghead").html();
pgtext = $("#pgtext").html();
$("#heading").html("");
$("#pghead").html("");
$("#pgtext").html("");

$.ajax({
  'async': true,
  'dataType': 'html',
  'url': "https://jediguy13.github.io/template.html",
  'success': function (data) {
      template = data.split("derp");
      $("body").html(template[0] + heading + template[1] + pghead + template[2] + pgtext + template[3]);
      $("body").fadeIn();
  }
});

不要使用
document.write（）
。曾经如果您有HTML代码段，只需将其附加到所需节点，如下所示：

$("body").html(template[0] + ...);

$("body").hide();
// ... make AJAX call and attach it as shown above
$("body").fadeIn();

如果页面最初是空的，并且所有内容都是用AJAX加载的，那么您将看到一个白色页面，该页面将填充您的代码

在您的情况下，它不会像我猜的那样是空的，因此您必须在获取HTML后立即清除它：

heading = $("#heading").html();
$("#heading").html("");

这将最小化HTML的原始暴露

此时，您可能希望慢慢淡入，如下所示：

$("body").html(template[0] + ...);

$("body").hide();
// ... make AJAX call and attach it as shown above
$("body").fadeIn();

fadeIn（）

使AJAX调用异步，并将所有这些都放入AJAX
success（）
方法中

这是一个完整的重写。只需复制并粘贴，然后告诉我它是否有效：

var heading, pghead, pgtext;

$("body").hide();

heading = $("#heading").html();
pghead = $("#pghead").html();
pgtext = $("#pgtext").html();
$("#heading").html("");
$("#pghead").html("");
$("#pgtext").html("");

$.ajax({
  'async': true,
  'dataType': 'html',
  'url': "https://jediguy13.github.io/template.html",
  'success': function (data) {
      template = data.split("derp");
      $("body").html(template[0] + heading + template[1] + pghead + template[2] + pgtext + template[3]);
      $("body").fadeIn();
  }
});

我最喜欢的技巧之一是放置一个loader div，并保持内容隐藏和loader可见，直到所有基于JS的布局更改完成。如果你有幸使用Jquery（或CSS3），你可以在不透明度上使用一种缓和效果，给它一种更好的感觉。
我最喜欢的技巧之一是放置一个loader div，并将内容隐藏起来，使加载程序可见，直到所有基于JS的布局更改完成。如果您有幸使用Jquery（或CSS3），您可以在不透明度上使用缓和效果，以提供更好的感觉。
这是标准的。服务器端先处理什么，然后是HTML，然后是Javascript。如果服务器上需要Javascript，请使用Node，否则请使用服务器上使用的任何东西（PHP、.NET等）来处理此格式。这是标准的。服务器端先处理什么，然后是HTML，然后是Javascript。如果服务器上需要Javascript，请使用Node，否则请使用服务器上使用的任何东西（PHP、.NET，无论什么）来处理这种格式设置。我还必须使用@James G.的答案来让它完全不显示文本。问题是页面加载后javascript仍在运行。我还必须使用@James G.的答案使其完全不显示文本。问题是页面加载后javascript仍在运行。