怎么实现在页面加载完成之前显示loading

Question

并且加载时间过长的话直接进入页面

Answer 1

<!-- fixed满屏的遮罩,loading动画 -->
<div id="loading"></div>

document.addEventListener('DOMContentLoaded', function() {
  // Todo: 隐藏这个div的dom操作
});

setTimeout(function() {
  // Todo: 超时隐藏这个div
}, 1000);

Answer 2

<div id="loading"></div>

---

<style>

#laoding{
    width:100%;
    height: 100%;
    position:fixed;
    background: url("你得图片") no-repeat 100% 100%;
}

</style>

---

<script>

document.addEventListener('DOMContentLoaded', function() {
  var id = document.getElementById("loading");
  id.style.display = "none";
});

</script>

Answer 3

页面盖一个铺满屏幕的遮罩，fixed定位，然后DOMContentLoaded以后再关掉

Answer 4

document.onreadystatechange = function () {
if (document.readyState === "complete") {

}
}

Answer 5

分享一个我刚才看框架时学习到的“在内容加载前显示loading的效果”，这是模拟效果，你想要的是真实的内容加载完成前显示"loading"吧？

if (mui(".mui-loading")) {
    setTimeout(function(){
        //直接添加等待加载的内容，覆盖原来loading的位置
    },1000)
}
这是通过定时器模拟的效果，你需要的真实效果，应该可以通过load()事件监听吧

Answer 6

显示loading还不好做吗？加载完成让它隐藏掉，时间过长，设个定时器，就算没加载完，也让它隐藏掉不就可以了