写的JS脚本正确吗？

项目需要在页面加载的时候显示正在加载的信息，由于网络太快，无法看到效果，请各位帮忙看看写的JS是否正确啊

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


document.onreadystatechange = function () {
        if (document.readyState == "complete") {
           console.log("加载完成!")
            $("#loading").html('')
        }else{
            $("#loading").append(`<div class="spinner-border text-info">正在加载数据</div>`)
        }

    }

你的代码有几个地方有问题

  • document.onreadystatechange事件在页面加载完成后会触发多次,但代码中判定为complete后就清空了loading div,导致动画只显示一瞬间就消失。
  • network too fast的情况下,由于加载太快,动画几乎不会显示,无法达到预期效果。

修改后的代码如下，望采纳！

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

<script>
let timer = setInterval(() => {
  if (document.readyState == "complete") {
    clearInterval(timer)
    $("#loading").html('')
  } else {
    $("#loading").append(`<div class="spinner-border text-info">正在加载数据</div>`)
  }
}, 200)

window.onload = () => {
  clearInterval(timer)
  $("#loading").html('')
}
</script>

网速快， 你就给你的js里添加一个sleep，让它多停留一会，然后看结果对不对

在开发者工具里把网速调到3g，网速就慢了