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

Question

好的。我正在 github 上使用 html 和 javascript 制作一个网站。早些时候，我使用模板来制作简单的格式化网页。我让它工作了，但它有一个恼人的错误:未格式化的网页显示在格式化的网页之前。我正在使用由 google 托管的最新版本的 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 在接近尾声时被调用。让浏览器仅显示格式化页面的更好方法是什么？

示例页面:website

Answer 1

不要使用document.write()。曾经。如果您有 HTML 片段，只需将其附加到所需的节点，如下所示:

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

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

就您的情况而言，正如我猜测的那样，它不会是空的，因此您必须在获取 HTML 后立即清除它:

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

这将最大限度地减少 HTML 的原始暴露。

此时您可能想要慢慢淡入它，如下所示:

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

fadeIn() 是一种类，您不妨用 show() 替换它。

使 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();
  }
});