网站未完成加载时loading覆盖全网页的实现
2021-04-13 04:26
标签：用户 微软雅黑 get 联系 mda rip 时间 https window 最近在改造自己的网站，然后就遇到了网站未完成加载时页面不是很好看，就想通过一个loading来让网页加载更自然 话不多说，直接上代码 看完之后是不是觉得好土的办法，哈哈哈。 思路是这样的： 之前尝试使用display来直接把这个div给隐藏掉，后来觉得消失的太过于突然，总感觉与加载后的网页有点衔接不上，然后就改成了visibility+opacity来控制。 我把开始样式的opacity定为1，然后隐藏div的样式的opacity为0，在原来的样式中规定transition的过渡时间，最终就实现了一个渐变的效果，看起来会自然很多。 那么来看看效果(应该最近不会改掉这个效果啦)：https://jniantic.cn 注意:网页中有一些需要加载很久的链接切勿使用此方法，会loading到用户自闭，还不如一开始就让用户看到加载的过程。 好了，如果大家有更多更好的方法，欢迎在评论区分享哦！ ——————————————————————————————————————— 以上为仅为个人总结观点，如果有错误，请联系我进行修改（mailto:entireyu@qq.com），十分感谢您能够看完！ 有疑问，欢迎在评论区评论哦。 转载请标明出处，本文链接：https://www.cnblogs.com/jniantic/p/12392164.html 网站未完成加载时loading覆盖全网页的实现 标签：用户 微软雅黑 get 联系 mda rip 时间 https window 原文地址：https://www.cnblogs.com/jniantic/p/12392164.htmlscript 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>
文章标题：网站未完成加载时loading覆盖全网页的实现
文章链接：http://soscw.com/index.php/essay/75030.html