jquery实现loading

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。Loading 效果通常用于在网页加载数据或执行某些操作时显示一个进度指示器，以提升用户体验。

类型

CSS Loading 效果：通过 CSS 动画实现简单的加载效果。
jQuery 插件：使用现成的 jQuery 插件来实现复杂的 Loading 效果。
自定义动画：使用 jQuery 编写自定义的动画效果。

应用场景

页面加载时显示加载动画。
异步请求数据时显示加载状态。
执行长时间操作时提供进度反馈。

示例代码

以下是一个使用 jQuery 实现简单 Loading 效果的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Loading Example</title>
    <style>
        #loading {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 9999;
        }
        #loading .spinner {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 2s linear infinite;
        }
        @keyframes spin {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }
    </style>
</head>
<body>
    <div id="loading">
        <div class="spinner"></div>
    </div>

    <button id="loadData">Load Data</button>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#loadData').click(function() {
                // 显示 Loading 效果
                $('#loading').show();

                // 模拟异步操作
                setTimeout(function() {
                    // 隐藏 Loading 效果
                    $('#loading').hide();
                    alert('Data loaded!');
                }, 3000);
            });
        });
    </script>
</body>
</html>

常见问题及解决方法

Loading 效果不显示：
- 确保 jQuery 库已正确加载。
- 检查 CSS 样式是否正确应用。
- 确保 JavaScript 代码在 DOM 加载完成后执行。

Loading 效果显示位置不正确：
- 使用 position: fixed 或 position: absolute 来定位 Loading 效果。
- 调整 top、left、transform 等属性来调整位置。
Loading 效果闪烁：
- 确保在异步操作开始前显示 Loading 效果，在操作完成后隐藏。
- 避免在短时间内频繁显示和隐藏 Loading 效果。

通过以上示例和解决方法，你可以轻松实现一个基本的 Loading 效果，并根据需要进行调整和优化。

页面内容是否对你有帮助？

有帮助

没帮助

有没有办法给jquery的$.ajax函数添加额外的行为？

、

有没有办法用这种行为来扩展jquery的$.ajax函数？当然，总是可以搜索代码中的所有$.ajax并添加必要的行为，但我觉得这样做有点懒惰。

浏览 0提问于2009-09-11得票数 2

回答已采纳

3回答

如何实现disable when loading指令

、

您好，我的作用域中有一个名为loadingdata的变量。它将具有true或false值来确定是否正在加载数据。我想在一个元素上添加一个属性，以便在加载数据时禁用它。以下是我已经有的代码，但它不起作用： return { scope: {}, link: function ($scope, elemen

浏览 3提问于2014-06-14得票数 0

1回答

逐个jQuery移动-Loading数据

、

我有一个在jQuery移动应用程序中设计此场景的要求。我有两个屏幕a)登录b)仪表板主页任何建议都会得到采纳。任何这样的场景的链接，教程，演示也会有所帮助。

浏览 3提问于2013-02-02得票数 1

1回答

jQuery移动-loading动态页

、、

我有一个index.html页面，它加载了jquery和jquery移动库(最新版本)，并提供了到另外两个页面的链接。

浏览 2提问于2011-11-16得票数 1

4回答

Javascript加载时间太长

、、

div "intro“的javascript终于加载了。加载时间太长，因为网页先加载bg图像，然后再加载java脚本。有没有一种方法可以在“介绍”div中显示“正在加载请等待”消息，直到它完全加载。我只想先加载导言。var tl = new Array( " Welcome user, ",);var i

浏览 1提问于2012-08-29得票数 2

回答已采纳

2回答

location.href的回调函数

、

我们有下面的代码function Download() { location.href= "FileDownloadHandler.ashx"; //Some Code(Hiding Loading Spinner)

浏览 3提问于2016-06-14得票数 4

回答已采纳

1回答

为什么提交按钮不能同时发送到PHP和jQuery？

、

<html> <script src="http://code.jquery.com/jquery-latest.js"></script><body><form action = "" method = "POST" id = "form"> <img src = "circ

浏览 3提问于2013-02-14得票数 0

3回答

在javascript函数上创建回调

、

基本上，我有一个功能 jQuery("#loading").fadeToggle(500);我希望能运行一些东西 Loading(function

浏览 1提问于2015-02-19得票数 1

回答已采纳

2回答

维护jQuery执行顺序

、

在我的jQuery代码中，我很难保持正确的执行顺序。我环顾四周，发现使用setTimeout()是一种选择，但我不知道该在哪里使用。{ var keyword = $('#search-input').val(); if(){ //some conditions an

浏览 3提问于2015-11-15得票数 2

回答已采纳

2回答

如何使用jQuery实现ASP.NET核心MVC AJAX请求

、、、

我在asp.net webforms和jquery Ajax工作了很多年，现在想在asp.ner核心中实现一个使用相同前端技术jQuery ajax的项目。

浏览 0提问于2020-05-09得票数 0

2回答

浏览器一直显示正在传输数据

、、

我在主页上有很多图片，上面写着10,000张图片，这些图片来自亚马逊服务器<?php ?> <div>title</div> <div>Description</div> </div>

浏览 2提问于2014-08-20得票数 2

2回答

如何显示加载图标或禁用按钮unitl登录asp.net核心剃刀

、、、、

我想要显示加载图标时，用户点击登录按钮，直到登录完成。在login.cshtm.cs文件中，我有一些处理和花费时间登录用户的代码。现在我想向用户显示加载图标，当他们单击登录页面中的登录按钮时，asp.net核心剃刀

浏览 23提问于2021-05-06得票数 0

3回答

jquery延迟加载div中的内容

、、

我有很多jquery scoll插件，但它们都是用于加载整个页面。我想在滚动到div.Can底部时加载现有div中的内容，有人能帮我吗？

浏览 4提问于2014-01-20得票数 6

2回答

需要用于无限滚动jquery的小逻辑

我想在用户将滚动条拖到rhw端时加载数据。基本上，当滚动条非常接近div或页面的末尾时，在接触div或页面的末尾之前，我希望加载数据。第一个是用于页末的 if($(window).scrollTop() + $(window).height() == $(document).height()) { var new_div = '<div class="new_block"></div>';

浏览 0提问于2012-04-11得票数 1

回答已采纳

1回答

.css()直到第二次单击才会更改-使用共享类选择器

、

我还在学习jquery。假设我可能需要卸载第一个单击函数。JavaScript：var cssLB='.jquery-lightbox-mode-html.jquery-lightbox-background,.jquer

浏览 3提问于2011-12-29得票数 1

回答已采纳

1回答

jquery，css在很长时间内不更改exec函数。

、、、

 $('p.main').addClass("hide"); for (var i = 0; i < 1000000000; i++) { }

浏览 4提问于2017-10-12得票数 2

回答已采纳

3回答

在文档上隐藏图像准备就绪，在加载时淡入每个图像

、

我正在尝试编写一个Jquery脚本，它使用setInterval在图像加载时淡入淡出。 $imgs = $props.find("img"); $me.load(function(){ $

浏览 0提问于2012-02-17得票数 4

回答已采纳

6回答

提交表单时的等待消息

、、、

<body> <form id="我如何实现这一点。

浏览 5提问于2015-02-23得票数 1

回答已采纳

2回答

我应该在页面加载时将预加载器图像放在哪里？

、

li> </ul> </head> <div id="loading"> <img id="loading-image" src="http://people.ischool.

浏览 24提问于2019-09-15得票数 1

1回答

滑块需要时间加载，而网站的其他分区已被加载

、、

new_images/3.jpg" /> <li> </li></div> 这是jQuery

浏览 4提问于2014-09-01得票数 0

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

jquery实现loading

基础概念

相关优势

类型

应用场景

示例代码

常见问题及解决方法

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐