当前位置：首页 > jquery

jquery 加载中

2026-02-03 20:07:55jquery

jQuery 加载中效果实现方法

使用 `show()` 和 `hide()` 方法

通过 jQuery 的 show() 和 hide() 方法可以快速实现加载中的显示与隐藏。创建一个加载中的元素，默认隐藏，在需要时显示。

// 显示加载中
$('#loading').show();

// 隐藏加载中
$('#loading').hide();

使用 CSS 动画

结合 CSS 动画和 jQuery 控制加载中的动态效果。例如旋转的加载图标。

jquery 加载中

#loading {
    display: none;
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

// 显示加载中
$('#loading').css('display', 'block');

// 隐藏加载中
$('#loading').css('display', 'none');

使用 AJAX 全局事件

通过 jQuery 的 AJAX 全局事件，可以在所有 AJAX 请求开始和完成时自动显示和隐藏加载中效果。

$(document).ajaxStart(function() {
    $('#loading').show();
});

$(document).ajaxStop(function() {
    $('#loading').hide();
});

使用 `fadeIn()` 和 `fadeOut()` 方法

通过淡入淡出效果增强用户体验，使加载中的显示和隐藏更加平滑。

jquery 加载中

// 显示加载中
$('#loading').fadeIn();

// 隐藏加载中
$('#loading').fadeOut();

结合 Promise 使用

在异步操作中使用 Promise，确保加载中效果在操作完成后隐藏。

function loadData() {
    $('#loading').show();
    return $.ajax({
        url: 'your-api-endpoint',
        method: 'GET'
    }).always(function() {
        $('#loading').hide();
    });
}

loadData().done(function(data) {
    console.log(data);
});

使用第三方插件

如果需要更复杂的加载效果，可以考虑使用第三方插件如 Spin.js 或 LoadingOverlay。

// 使用 Spin.js
var opts = {
    lines: 12,
    length: 7,
    width: 4,
    radius: 10,
    color: '#000',
    speed: 1,
    trail: 60,
    shadow: false
};
var spinner = new Spinner(opts).spin(document.getElementById('loading'));

以上方法可以根据具体需求选择适合的方式实现 jQuery 加载中效果。