Question

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

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

好的，首先我要说你不应该依赖JS来格式化你的整个页面，除非你正在托管单页应用程序，即便如此......可能不是整个页面。< / p>

要回答您的问题，不显示未格式化页面的唯一方法是在页面加载之前隐藏您的内容。提供body标记或容器style='display:none;'，然后在JS执行完毕后，通过调用类似$('body').show()的内容显示内容。

Answer 2

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

Answer 3

我最喜欢的一个技巧是放置一个加载器div并保持内容隐藏，加载器可见，直到完成所有基于JS的布局更改。如果您有使用Jquery（或CSS3）的奢侈品，您可以对不透明度使用缓动效果，以使其具有更好的感觉。

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

3 个答案: