javascript - 如何使用 Javascript 进行自定义转换

Question

所以我正在从头开始开发这个网站(有史以来第一次)，我已经根据我制作的 psd 制作了总体布局，一切都很好，所以我现在正处于我想要稍微改进网站的地步带有一些 javascript 效果函数。

当我在索引页面时，您会看到横幅、侧边栏和内容(文章)。当我按下文章时，它会转到文章(很明显)，但我想在 0:22 制作一个像这样的自定义加载页面: https://www.youtube.com/watch?v=k1q6Y_snURw#t=20

我必须制作或找到一个 gif，但说我已经完成了，我该如何将其添加到网站？

尽管我想我必须使用每篇特定文章的 ID 才能将其转到相应的文章，但这些文章都属于一个类。

Answer 1

编辑:将其弹出到一个文件中，并在每个有链接的页面中添加对它的引用:

function loadXMLDoc(name) {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.addEventListener("load", transferComplete, false);
  xmlhttp.open("GET", name, true);
  document.getElementById("Loading").style.display = "block";
  xmlhttp.send();

  function transferComplete() {
    document.write(xmlhttp.responseText);
    history.replaceState(null, null, name);
  }
}

function AJAXcallback(e) {
  var e = window.e || e;
  var href = e.target.getAttribute("href");
  if (e.target.tagName !== 'A' || href[0] == "#" || href.substring(0, 11).toUpperCase() == "JAVASCRIPT:" || e.target.class == "noloadpage")
    return;
  e.preventDefault();
  loadXMLDoc(href);
}
if (document.addEventListener)
  document.addEventListener('click', AJAXcallback, false);
else
  document.attachEvent('onclick', AJAXcallback);

以及在加载下一页时显示的内容 (一定要像这样添加 id“Loading”):

<div id="Loading" style="display:none">Loading</div>

这使得每个不是 anchor (#id)或函数(javascript:whatever)并且没有“noloadpage”类的链接使用 AJAX 加载并显示 Loading div 而加载中。