给你的网站加上一个加载动画

飞流 · 发表于 2025-9-18 19:50:45

资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

您需要登录才可以下载或查看，没有账号？立即注册

×

不依赖任何框架，原生JS实现网站加载loading动画。
效果展示

电脑端:

手机端效果一致的哈

实现方法

在网站目录创建文件 itjscc.js

(function() {
if (window.itjsccPageLoader) return;
const loadStartTime = performance.now();
let isComplete = false;
const style = document.createElement('style');
style.textContent = `
/* 加载覆盖层：半透明效果 */
.itjscc-ploader {
position: fixed !important;
inset: 0 !important;
background: rgba(255, 255, 255, 0.8) !important; /* 80%透明度的白色，可看到下层 */
backdrop-filter: blur(2px) !important; /* 轻微模糊背景，增强层次感 */
z-index: 999999 !important;
display: grid !important;
place-items: center !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: auto !important;
transition: opacity 0.6s ease-out !important;
}
/* 隐藏状态 */
.itjscc-ploader.hidden {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* 加载动画容器 */
.itjscc-ploader-container {
text-align: center !important;
padding: 24px !important;
background: rgba(255, 255, 255, 0.95) !important; /* 加载器本身背景更实一些 */
border-radius: 12px !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
min-width: 220px !important;
}
/* 加载动画元素 */
.itjscc-ploader-animation {
width: 50px !important;
height: 50px !important;
margin: 0 auto 16px !important;
position: relative !important;
}
.itjscc-ploader-circle {
width: 100% !important;
height: 100% !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
border-radius: 50% !important;
border: 3px solid transparent !important;
border-top-color: #3b82f6 !important;
animation: itjscc-rotate 1.5s linear infinite !important;
}
.itjscc-ploader-circle:nth-child(2) {
border-top-color: #10b981 !important;
animation-delay: 0.2s !important;
transform: scale(0.8) !important;
}
.itjscc-ploader-text {
font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
font-size: 15px !important;
color: #1e293b !important;
font-weight: 500 !important;
}
/* 旋转动画 */
@keyframes itjscc-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
`;
(document.head || document.documentElement).appendChild(style);
const loader = document.createElement('div');
loader.className = 'itjscc-ploader';
loader.innerHTML = `
<div class="itjscc-ploader-container">
<div class="itjscc-ploader-animation">
<div class="itjscc-ploader-circle"></div>
<div class="itjscc-ploader-circle"></div>
</div>
<div class="itjscc-ploader-text">Loading...</div>
</div>
`;
document.documentElement.appendChild(loader);
const statusText = loader.querySelector('.itjscc-ploader-text');
const statusMessages = ["Loading...", "Preparing content...", "Almost ready..."];
let msgIndex = 0;
const textInterval = setInterval(() => {
if (!isComplete) {
msgIndex = (msgIndex + 1) % statusMessages.length;
statusText.textContent = statusMessages[msgIndex];
} else {
clearInterval(textInterval);
}
}, 2000);
function hideLoader() {
if (isComplete) return;
isComplete = true;
clearInterval(textInterval);
statusText.textContent = "Ready";
// 在这里可以设置加载动画最少显示时间
const MIN_DISPLAY_TIME = 1000;
const elapsed = performance.now() - loadStartTime;
const delay = elapsed < MIN_DISPLAY_TIME ? MIN_DISPLAY_TIME - elapsed : 0;
setTimeout(() => {
loader.classList.add('hidden');
// 动画结束后彻底清理
setTimeout(() => {
if (loader.parentNode) loader.parentNode.removeChild(loader);
if (style.parentNode) style.parentNode.removeChild(style);
}, 600);
}, delay);
}
let loaded = false;
function onLoadComplete() {
if (loaded) return;
loaded = true;
hideLoader();
}
if (document.readyState === 'complete' || document.readyState === 'interactive') {
onLoadComplete();
} else {
document.addEventListener('DOMContentLoaded', onLoadComplete);
window.addEventListener('load', onLoadComplete);
document.addEventListener('readystatechange', () => {
if (document.readyState === 'complete' || document.readyState === 'interactive') {
onLoadComplete();
}
});
}
window.itjsccPageLoader = { hide: hideLoader };
})();

复制代码

把以上代码粘贴到刚刚创建的itjscc.js文件

文件名可以自定义，只要引入时一致即可。

可根据自己的需要更改加载动画显示时间。
在需要加载动画的页面加上以下代码

<script src="itjscc.js"></script>

复制代码

根据自己的情况判断需不需要修改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，可根据需求调整（如网络慢的场景可设更长）。

	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	10-30 17:02
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	10-09 09:07
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-24 09:00
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-11 11:40
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-02 09:17
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-27 08:56
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-20 15:12
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-03 10:22
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	06-30 08:57
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	06-18 09:14
	系统消息：清风网络已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	04-11 09:40
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-10 09:31
	系统消息：IXM77777已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-09 13:44
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-09 09:22
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	04-09 08:52
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-08 09:24
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-07 09:02
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	02-27 09:35
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	02-26 09:06
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	02-25 08:49

[代码技巧] 给你的网站加上一个加载动画

资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

本帖被以下淘专辑推荐:

飞流广播+ 发布

浏览过的版块

会员LV.1

会员LV.2

会员LV.3

会员LV.4

会员LV.5

会员LV.6

会员LV.7

会员LV.8

会员LV.9

会员LV.10

关于我们

常用功能

服务引导

fl@fllt.cn