jquery实现页面等待时的交互效果_jquery 页面没有加载完成怎么加等待弹框-CSDN博客

本文链接：https://blog.csdn.net/werewolf_st/article/details/49205567

当前端请求后台数据需要较长时间时，为避免用户认为页面无响应，本文介绍了使用jQuery实现页面等待交互效果的方法。通过在请求前展示等待图标并在数据返回后移除，提供加载反馈。详细代码示例分别在test.html、test.js和request.js中给出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

探索这个是因为前端在请求后台有时候需要较长的一段时间，如果不给不用户一些提示性的消息，如正在加载之类的，用户可能会以为页面已死，所以还是得简单的做点交互才行。

思路如下：

在触发请求后台之前便开始等待效果
在收到后台返回数据时候便取消等待效果
等待效果如何实现，这个才是主要问题

步骤：

等待效果的实现：（先直接上代码吧):

test.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="./test.js"></script>
</head>
<body>
    <button id='btn1' type='button'>开始</button>
    <button id='btn2' type='button'>取消</button>
    <p>
    <i id='icon'></i>
    </p>
</body>
</html>

上面的html页面我引入了Font Awesome，它是图标字体库，我就是使用了它里边儿的一个动态图标来表示等待状态的,具体可去它的网站了解http://fontawesome.dashgame.com/。

test.js

$(function(){
    $('#btn1').click(function(){
        $('#icon').addClass('fa fa-circle-o-notch fa-spin');
    });
    $("#btn2").click(function(){
        $('#icon').removeClass('fa fa-circle-o-notch fa-spin');
    })
});

这个js应该很简单吧，哈哈，就是给id为icon的标签`增加和删除类(.fa fa-circle-o-notch fa-spin)便可实现了，具体效果可以复制代码下去试试哦….

具体的请求后台时的js例子

request.js

$(function () {
    $('#btnSubmit').click(function (e) {
        $.ajax({
            beforeSend: function(){
                $("#icon").addClass("fa fa-circle-o-notch fa-spin");
            },
            url: '/test',
            type: 'POST',
            dataType: 'json',
            success: function (data) {
                $("#icon").removeClass("fa fa-circle-o-notch fa-spin");
            }
        });
    });
});