javascript - 纯JavaScript页面加载效果

Question

我使用 JavaScript 创建了简单的页面加载动画。
我想将此动画添加到所有页面，因此我为其创建 loading.start(); 方法。因此， loading.start(); 方法运行良好，但 loading.complete(); 方法不起作用。所以看起来有一个错误

Uncaught TypeError: Cannot read property 'remove' of null

当前未找到正文正在加载元素。我在加载正文时附加它。当我想删除它之后。帮助解决这个问题

这是我的 JavaScript 代码

var loading = {
    start: function () {
        document.body.insertAdjacentHTML('beforeend', '<div id="loading">LOADING</div>');
    },
    complete: function () {
        var loading = document.getElementById("loading");
        loading.remove(loading);
    }
};

document.addEventListener("readystatechange", function () {
    if (document.readyState === 'complete') {
        loading.complete();
    }
});

window.onload = function(){
  loading.start();
};

Answer 1

仅当 window 已加载时，才插入 id 为 loading 的段落(在此状态下，readyState code> 已经等于 "complete")。您想要做的是当 readyState 等于 complete 时获取段落，但在此阶段，没有任何段落插入到 DOM 中，因为 window. onload() 事件尚未触发。因此返回值将始终等于 null。

您需要做的是删除window.onload，以便loading对象文字的start方法在之前立即触发ReadyState 等于 complete 就像这样:

var loading = {
  start: function() {
    document.body.insertAdjacentHTML('beforeend', '<div id="loading">LOADING</div>');
  },
  complete: function() {
    var loading = document.getElementById("loading");
    console.log(loading);
    loading.remove(loading);
  }
};
loading.start();
document.addEventListener("readystatechange", function() {
  console.log(document.readyState);
  if (document.readyState === "complete") {
    loading.complete();
  }
});