jQuery生成假加载动画效果

当网页加载缓慢时显示一个loading动画是一个很好的用户体验方法。jQuery可以生成假加载动画效果，即在网页加载完成前，显示一个虚假的加载动画来提高用户的耐心等待网页的内容加载完成。

下面是jQuery生成假加载动画效果的完整攻略：

步骤一：添加HTML代码

在HTML页面中添加一个DIV元素，用于显示loading动画。下面是一个示例代码：

<div id="loading" style="display:none">
    <div class="loading-icon"></div>
</div>

其中，loading-icon类定义了一个CSS3旋转动画，用于表示loading动画：

.loading-icon {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top-color: #3399cc;
    animation: spin .8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

步骤二：编写jQuery代码

当页面加载完成时，隐藏loading元素。当页面加载缓慢时，显示loading元素。

$(document).ready(function() {
    // 隐藏loading动画
    $('#loading').hide();

    // 未加载完毕则显示loading动画
    $(window).on('beforeunload', function(){
        $('#loading').show();
    });
});

在上面的代码中，我们首先使用jQuery的ready()方法隐藏了loading元素。接着使用beforeunload事件，当用户在页面上进行操作时，浏览器会接收到这个事件，此时我们显示loading动画。当页面加载完成后，此事件将不再被触发，而页面显示的loading动画将被隐藏。

下面是一个完整的示例，包含一个按钮和一个JS脚本，当用户点击按钮时，模拟了一个延时5秒的AJAX请求，从而观察到loading动画的效果。

<!DOCTYPE html>
<html>
<head>
    <title>jQuery生成假加载动画效果</title>
    <meta charset="utf-8">
    <style type="text/css">
        .loading-icon {
            border-radius: 50%;
            width: 40px;
            height: 40px;
            border: 4px solid rgba(0, 0, 0, 0.1);
            border-top-color: #3399cc;
            animation: spin .8s linear infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <button id="btn">模拟AJAX请求</button>
    <div id="loading" style="display:none">
        <div class="loading-icon"></div>
    </div>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#loading').hide();
            $('#btn').on('click', function() {
                $('#loading').show();
                setTimeout(function() {
                    // 模拟AJAX请求完成
                    $('#loading').hide();
                }, 5000);
            });
        });
    </script>
</body>
</html>

此示例代码中，我们为按钮添加了一个click事件，当用户点击按钮时，显示loading动画，模拟了一个延时5秒的AJAX请求，请求完成后，loading元素将被隐藏。

以上就是jQuery生成假加载动画效果的完整攻略，希望对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery生成假加载动画效果 - Python技术站

jQuery生成假加载动画效果

步骤一：添加HTML代码

步骤二：编写jQuery代码

相关文章