JavaScript 如何做骨架屏
打开一款常用的购物APP，进入商品详情页时，你可能不会注意到：在商品图片、价格、详情文字真正加载出来之前，页面上会先出现一组灰色的矩形占位框——这就是骨架屏。它像建筑施工时的钢筋骨架，帮用户提前感知页面的布局结构，避免长时间空白带来的等待焦虑，同时也能让用户更快预判页面内容，提升整体浏览体验。而用JavaScript实现骨架屏，是前端开发里最灵活、最易适配不同场景的方式之一。
先搞懂：骨架屏的核心逻辑
不管是用什么技术做骨架屏，核心都只有两个步骤：先给页面“临时搭骨架”，等真正的内容加载完成后，再把骨架替换成实际的内容。JavaScript的优势在于，它可以精准控制这两个步骤的时机，还能根据不同页面的加载状态调整骨架的显示时长，避免出现内容闪跳的问题。
举个生活化的例子：就像你要招待朋友吃饭，先把餐桌摆好（这就是骨架），等菜（内容）做好端上来，再把盘子放到对应的位置（替换骨架）。用JS做这件事，就是让代码自动完成“摆餐桌”和“上菜换盘”的动作，不用你手动盯着。
用JS实现骨架屏的简单步骤
先写好骨架的HTML结构
骨架屏的本质是占位元素，你可以用DIV标签模拟页面的各个模块，比如商品图、标题、价格、详情框。为了让它看起来更像真实页面，要给这些DIV设置和实际内容一致的尺寸和位置，再用CSS设置灰色背景、圆角这些基础样式。
比如做一个商品详情的骨架，结构可以这样写：
`html
<div id="skeleton">
<div class="skeleton-img"></div> <!-- 模拟商品图片 -->
<div class="skeleton-title"></div> <!-- 模拟商品标题 -->
<div class="skeleton-price"></div> <!-- 模拟商品价格 -->
</div>
`
对应的CSS里，给.skeleton-img设成200x200的灰色块，.skeleton-title设成150px宽、20px高的灰色条，和真实页面的模块尺寸对应上，看起来就很逼真。
用JS控制内容加载与替换
接下来就是核心的JS逻辑：先让页面默认显示骨架，等实际内容加载完成后，再隐藏骨架、显示真实内容。这里可以用页面的load事件，它会在整个页面（包括图片、样式等所有资源）加载完成后触发。
举个实际的JS代码例子：
`javascript
// 先获取骨架元素和真实内容元素
const skeleton = document.getElementById('skeleton');
const realContent = document.getElementById('real-content');
// 等页面所有资源加载完成后执行
window.addEventListener('load', function() {
// 隐藏骨架，显示真实内容
skeleton.style.display = 'none';
realContent.style.display = 'block';
});
`
还是用刚才的吃饭例子理解：window.load就像“菜都做好了”的信号，JS收到信号后，就把原来的空餐桌（骨架）收起来，把菜（真实内容）端到桌上。
优化细节，避免闪跳问题
有时候会出现这种情况：骨架刚显示，还没等用户看清，真实内容就突然跳出来，反而影响体验。这时候可以给骨架加一个“最少显示时长”——比如不管内容加载多快，骨架都要至少显示500毫秒。
用JS的定时器就能实现：
`javascript
const skeleton = document.getElementById('skeleton');
const realContent = document.getElementById('real-content');
// 标记“内容加载完成”的状态
let isContentLoaded = false;
// 标记“最少时长到了”的状态
let isMinTimeOver = false;
// 等内容加载完成
window.addEventListener('load', function() {
isContentLoaded = true;
hideSkeletonIfReady();
});
// 设置最少显示500ms的定时器
setTimeout(function() {
isMinTimeOver = true;
hideSkeletonIfReady();
}, 500);
// 两个条件都满足就隐藏骨架
function hideSkeletonIfReady() {
if (isContentLoaded && isMinTimeOver) {
skeleton.style.display = 'none';
realContent.style.display = 'block';
}
}
`
相当于之前定了“上菜最快要500毫秒”，哪怕菜提前做好，也要等够时间再端出来，避免朋友刚坐下菜就变没的尴尬。
用JavaScript做骨架屏不需要复杂的工具，只要掌握“先搭骨架、等加载完再替换”的核心逻辑，再调整好显示细节，就能适配绝大多数前端页面。小到个人博客，大到电商平台，这种轻量又灵活的实现方式，都是提升页面体验的小妙招。