纯JavaScript页面加载效果

我使用JavaScript创建了简单的页面加载动画
我想将此动画添加到所有页面，因此我创建了

load.start（）它的方法。因此，
load.start（）方法运行良好，但
加载.complete（）方法不工作。所以它似乎有一个错误

未捕获的TypeError:无法读取null的属性“remove”

当前未找到加载元素的
正文。我在加载主体时附加它。之后我想删除它。
帮助修复此问题

这里是我的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();
};

var加载={
开始：函数（）{
document.body.insertAdjacentHTML（'beforeed'，'LOADING'）；
},
完成：函数（）{
var加载=document.getElementById（“加载”）；
装载。移除（装载）；
}
};
document.addEventListener（“readystatechange”，函数（）{
如果（document.readyState==='complete'）{
加载。完成（）；
}
});
window.onload=函数（）{
加载.start（）；
};
新编辑：
无法找到该div，因为当
document.readyState
完成时，该div尚未添加到DOM中。它是在后面添加的。如果您直接在HTML中创建div，那么当主体完成加载时它就会出现

但是，我一直在深入搜索，发现
document.readyState
将在页面首次加载后保留到“完成”。您可以在它之后修改DOM，事件侦听器将不会检测到任何内容，
readyState
也不会更改。
如果您想在一开始就制作动画，可以使用
document.readyState
。但是，如果您想稍后设置动画，则需要更改代码的结构以使其正常工作。添加特定于设置动画的元素的事件侦听器

请看以下CSS动画代码：

<div id="sample" class="square"></div>
<a href="#" onclick="this.style.display='none'; loading();">Start Animation</a>

<style type="text/css">
.square {
    width: 100px;
    height: 100px;
    background: red;
    opacity: 1;
    transition-property: opacity;
    transition-duration: 2s;
}
.square.hide {
    opacity: 0;
}
</style>

<script type="text/javascript">
//start
var sample = document.getElementById('sample');
function loading() {
    document.body.insertAdjacentHTML('beforeend', '<div id="loading">LOADING</div>');
    sample.className += ' hide';
}
//CSS animation
function cssAnimation(){
    var transitions = {
        'transition':'transitionend',
        'OTransition':'oTransitionEnd',
        'MozTransition':'transitionend',
        'WebkitTransition':'webkitTransitionEnd'
    }
    var element = document.createElement('fake');
    var x;
    for (x in transitions) {
        if (element.style[x] !== undefined) { return transitions[x]; }
    }
}
//detect end & launch CSS animation
sample.addEventListener(cssAnimation(), function() {
    document.getElementById("loading").remove();
});
cssAnimation();
</script>


.广场{
宽度：100px；
高度：100px；
背景：红色；
不透明度：1；
过渡特性：不透明度；
过渡时间：2s；
}
.方皮{
不透明度：0；
}
//开始
var sample=document.getElementById（'sample'）；
函数加载（）{
document.body.insertAdjacentHTML（'beforeed'，'LOADING'）；
sample.className+='hide'；
}
//CSS动画
函数cssAnimation（）{
变量转换={
“transition”：“transitionend”，
“OTransition”：“oTransitionEnd”，
'MozTransition'：'transitionend'，
“WebKittTransition”：“WebKittTransitionEnd”
}
var-element=document.createElement（'false'）；
var x；
对于（变换中的x）{
if（element.style[x]！==未定义）{return transitions[x]；}
}
}
//检测结束并启动CSS动画
sample.addEventListener（cssAnimation（），function（））{
document.getElementById（“加载”）.remove（）；
});
cssAnimation（）；
这就是问题所在：

var loading = document.getElementById("loading");

检查Id“正在加载”。找不到该Id的元素，因此无法删除。
仅当
窗口
已加载时（在此状态下，
readyState
已等于
“complete”
），才插入带有
Id
的
加载
的段落。您试图做的是在
readyState
等于
complete
时获取段落，但在此阶段，由于window.onload（）事件尚未触发，因此未将段落插入DOM。因此返回值将始终等于
null

您需要做的是删除
窗口。onload
以便
start
加载
对象文本的方法在
readyState
等于
complete
之前立即触发，如下所示：


var加载={
开始：函数（）{
document.body.insertAdjacentHTML（'beforeed'，'LOADING'）；
},
完成：函数（）{
var加载=document.getElementById（“加载”）；
控制台日志（加载）；
装载。移除（装载）；
}
};
加载.start（）；
document.addEventListener（“readystatechange”，function（））{
console.log（document.readyState）；
如果（document.readyState==“完成”）{
加载。完成（）；
}
});当前未找到正文
正在加载
元素。我在加载主体时附加它。在我想移除它之后。兰比奇，我已经尝试修复它。它不起作用。你能用工作代码编辑你的答案吗。谢谢。好的，新编辑。看起来代码的结构无法满足您的要求。我把工作示例代码。