不依赖任何框架，原生JS实现网站加载loading动画。
效果展示
电脑端:
手机端:
实现方法
把以上代码粘贴到刚刚创建的itjscc.js文件
文件名可以自定义，只要引入时一致即可。
可根据自己的需要更改加载动画显示时间。
在需要加载动画的页面加上以下代码
根据自己的情况判断需不需要修改src后的路径。
这里推荐把这行代码放在head标签的第一行，确保优先执行。
错误位置提醒：
❌ 不要放在<body>内部（无论头部还是底部）：会延迟动画创建时机，可能导致页面先显示空白或内容，再弹出加载动画，体验割裂。
❌ 不要放在其他大型脚本之后：若前面有耗时的脚本，会阻塞加载动画执行，失去 “提前显示” 的意义。
❌ 不要放在<link rel=”stylesheet”>之后：虽然样式表会阻塞渲染，但加载动画的样式是通过脚本动态创建的，放在最顶部能确保样式优先生效。
推荐放在<head>标签下第一行，既能保证加载动画在页面加载的第一时间就准备就绪，又不会对核心性能造成影响，达到尽早显示、不拖慢加载的效果。
若希望网站所有页面都加上加载动画样式，只需要在全局文件引入即可，例如:header文件。
代码说明
性能优化：动画完全用 CSS 实现，不占用 JS 主线程，性能高效。加载完成后彻底清理 DOM 和样式，无冗余资源残留。避免复杂选择器和重绘操作，CSS 逻辑轻量。
用户体验：半透明覆盖层既显示加载状态，又让用户感知 “内容正在呈现”，减少等待焦虑。状态文本轮换和最少显示时间（1 秒），避免 “闪一下就消失” 的突兀感。淡出动画平滑过渡，提升精致度。
兼容性与安全性：不依赖任何框架，原生 JS 实现，兼容所有现代浏览器。动态创建元素，不影响网页原有结构和 SEO（搜索引擎会忽略加载层）。
样式定制：如需修改颜色 / 尺寸，可调整 CSS 中的border-top-color（动画颜色）、background（透明度）、width/height（动画大小）等属性。
至少显示时间：MIN_DISPLAY_TIME 默认 1000ms，可根据需求调整（如网络慢的场景可设更长）。
若实在不会可联系博主协助你完成。
本代码由IT技术博客博主元圣原创，转载请标明出处!
没有回复内容