当前位置：首页 > jquery

jquery 加载中

2026-03-16 16:38:37jquery

jQuery 加载中效果的实现方法

使用.show()和.hide()方法控制加载动画的显示与隐藏

在需要显示加载动画时调用$("#loading").show()，完成时调用$("#loading").hide()。这种方式适合简单的显示/隐藏需求。

// 显示加载动画
$("#loading").show();

// 执行耗时操作
setTimeout(function(){
    // 隐藏加载动画
    $("#loading").hide();
}, 2000);

通过Ajax的全局事件处理加载状态

jQuery提供了全局Ajax事件，可以统一处理所有Ajax请求的加载状态。这种方式适合项目中有大量Ajax请求的情况。

jquery 加载中

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

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

使用CSS3动画增强视觉效果

结合CSS3的动画效果可以让加载动画更加流畅。常见的加载动画包括旋转图标、进度条等。

#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
}

.spinner {
    width: 40px;
    height: 40px;
    margin: 100px auto;
    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); }
}

结合Promise处理异步操作

jquery 加载中

现代JavaScript开发中，Promise是处理异步操作的推荐方式。jQuery的Ajax从1.5版本开始就支持Promise接口。

function loadData() {
    $("#loading").show();

    return $.ajax({
        url: "data.json",
        method: "GET"
    }).always(function(){
        $("#loading").hide();
    });
}

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

使用第三方加载动画库

如果项目需求比较复杂，可以考虑使用专门的加载动画库，如Spin.js、Loaders.css等。这些库提供了更多样化的加载效果。

var opts = {
    lines: 12,
    length: 7,
    width: 4,
    radius: 10,
    color: '#000',
    speed: 1,
    trail: 60,
    shadow: false
};

var target = document.getElementById('loading');
var spinner = new Spinner(opts).spin(target);