Ajax请求时如何显示Loading效果？前端Ajax返回数据前loading等待效果

“`

CSS样式编写

使用Flexbox布局实现遮罩层的垂直水平居中，并利用CSS变量定义动画参数,便于后续主题切换。

加载中

实现loading效果【Vue小技巧】

1万5:17

小野WEB世界·2021-05-28来源: 哔哩哔哩

.loading-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    visibility: hidden; / 默认隐藏 /
}
.loading-mask.active {
    visibility: visible;
}
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

JavaScript逻辑控制

使用fetch API发起请求，并在try...catch块中精确控制Loading状态的显示与隐藏。

const loadBtn = document.getElementById('loadBtn');
const loadingMask = document.getElementById('loadingMask');
const content = document.getElementById('content');
loadBtn.addEventListener('click', async () => {
    // 1. 显示Loading
    loadingMask.classList.add('active');
    loadBtn.disabled = true; // 禁用按钮防止重复点击
    try {
        const response = await fetch('/api/data');
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();
        // 2. 处理数据并渲染
        content.innerHTML = JSON.stringify(data);
    } catch (error) {
        console.error('Fetch error:', error);
        content.innerHTML = '<p>加载失败，请重试</p>';
    } finally {
        // 3. 隐藏Loading，无论成功还是失败
        loadingMask.classList.remove('active');
        loadBtn.disabled = false;
    }
});

进阶优化：骨架屏与微交互

结构复杂的页面，简单的旋转图标可能显得单调，近年来，骨架屏（Skeleton Screen）因其能模拟页面布局而受到广泛欢迎，它通过灰色色块预占内容位置，让用户在数据加载前就能感知到页面结构。

骨架屏的实现技巧

骨架屏可以通过CSS直接绘制，也可以利用现成的库如react-loading-skeleton，关键在于确保骨架屏的布局与实际数据渲染后的布局一致,避免内容重排导致的抖动。

微交互细节

在Loading过程中，加入细微的交互反馈能提升质感，当鼠标悬停在Loading图标上时，可以暂停动画或改变颜色；在数据加载完成后，可以添加一个淡入动画，使内容平滑出现，这些细节虽不起眼,但能显著提升产品的精致感。

常见问题解答

Ajax返回数据之前的loading等待效果如何实现全局统一配置？

可以通过封装Axios拦截器来实现，在

request拦截器中显示全局Loading，在response拦截器的finally块中隐藏Loading，这样无需在每个请求处手动控制状态，极大简化了代码结构,适用于大多数基于Vue或React的项目。

Loading效果在移动端是否会影响性能？

多数情况下，合理的CSS动画对移动端性能影响微乎其微，但应避免使用复杂的滤镜或大量DOM操作，建议使用transform和opacity属性进行动画，因为它们由GPU加速，能保持60fps的流畅度，对于低端设备,可考虑降级为简单的静态图标。

如何判断Loading效果是否达到了最佳用户体验？

判断标准主要基于用户行为数据，通过埋点监测用户在加载期间的跳出率、平均等待时长以及二次点击率，如果数据显示用户在加载过程中频繁退出或重复点击，则说明Loading反馈不够明确或加载时间过长,需优化后端接口或前端展示策略。