Question

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

未捕获的TypeError：无法读取属性＆＃39;删除＆＃39;为null

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

此处为我的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

仅当$save_answers->execute();已加载时，才会插入包含id loading的段落（在此状态下，window已等于readyState）。您要做的是在"complete"等于readyState时获取段落，但在此阶段，没有段落插入DOM，因为window.onload（）事件没有'然后才开火。因此返回的值总是等于complete。

您需要做的是删除null，以便在window.onload等于start之前loading 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();
  }
});

Answer 2

新编辑： 你找不到div，因为当document.readyState完成时，div还没有被添加到DOM中。它是在之后添加的。如果直接在HTML中创建div，则在主体完成加载时会显示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>

Answer 3

这是问题所在：

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

检查ID“加载”。找不到该ID的元素，因此无法删除。

纯JavaScript页面加载效果

3 个答案: