在页面加载前先出现加载loading，页面加载完成之后再显示页面

转载

于 2019-03-15 16:53:00 发布 · 1.2w 阅读

15 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Dark-fire-liehuo/p/10538125.html

文章标签：

#javascript #php #前端 #ViewUI

本文介绍了一个在页面加载完成之前显示loading动画的案例。通过将JavaScript代码添加到HTML头部，可以在内容加载前展示一个loading图标或背景gif，以提升用户体验。详细做法可参考相关链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在此加入一个关于页面加载成功之前先展现一个loading的案例：

如下代码写入js里放在html头部即可实现需求：添加的可以自己在css文件设置宽高，也可以放入一个background的gif的loading图片

//在页面未加载完毕之前显示的loading Html自定义内容

var _LoadingHtml = '页面加载中，请等待...';

//呈现loading效果

document.write(_LoadingHtml);

//监听加载状态改变
document.onreadystatechange = completeLoading;

//加载状态为complete时移除loading效果
function complet