网站未完成加载时loading覆盖全网页的实现

Posted 2020-11-28 jniantic

最近在改造自己的网站，然后就遇到了网站未完成加载时页面不是很好看，就想通过一个loading来让网页加载更自然

话不多说，直接上代码

 

<script type="text/javascript">
    window.onload = function () {
        document.getElementById("loading").style.opacity = ‘0‘;
        document.getElementById("loading").style.visibility = ‘hidden‘;
}
</script>

<div id="loading" style="width:100%;height:100%;position:fixed;background:#fff;z-index:9990;top:0px;left:0px;transition: all 1s linear;opacity: 1;">
    <div class="ld-content" style="position: absolute;top:50%;left: 50%;margin-left: -240px;margin-top: -120px;">
        <img src="/images/loading.gif" alt="" height="240px" width="480px">
    </div>
</div>

看完之后是不是觉得好土的办法，哈哈哈。

思路是这样的：

1. 把要覆盖在最顶上的页面最先加载，就相当于盖上一块板，底下的内容继续发酵；
2. 等底下的内容加载完成了就把上面这个页面隐藏掉，这样就实现了一个loading页面的实现。

   

之前尝试使用display来直接把这个div给隐藏掉，后来觉得消失的太过于突然，总感觉与加载后的网页有点衔接不上，然后就改成了visibility+opacity来控制。

我把开始样式的opacity定为1，然后隐藏div的样式的opacity为0，在原来的样式中规定transition的过渡时间，最终就实现了一个渐变的效果，看起来会自然很多。

那么来看看效果(应该最近不会改掉这个效果啦)：https://jniantic.cn

   

注意:网页中有一些需要加载很久的链接切勿使用此方法，会loading到用户自闭，还不如一开始就让用户看到加载的过程。

好了，如果大家有更多更好的方法，欢迎在评论区分享哦！

———————————————————————————————————————

以上为仅为个人总结观点，如果有错误，请联系我进行修改（mailto:[e-mail]），十分感谢您能够看完！

有疑问，欢迎在评论区评论哦。

转载请标明出处，本文链接：https://www.cnblogs.com/jniantic/p/12392164.html