自定义JS加载等待动画loading

灰太狼 2022-05-16 07:10 410阅读 0赞

闲话少说，上代码：
     
          如下为加载数据时的等待css动画，效果如图：
          ![这里写图片描述](https://img-blog.csdn.net/20180816112802275?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzMzODc1MQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
    
    ```
    //采用jquery easyui loading css效果
        function ajaxLoading() {
            $("<div class=\"datagrid-mask\"></div>").css({
                display: "block",
                width: "100%",
                height: $(window).height()
            }).appendTo("body");
            $("<div class=\"datagrid-mask-msg\"></div>").html("正在处理，请稍候。。。").appendTo("body").css({
                display: "block",
                left: ($(document.body).outerWidth(true) - 190) / 2,
                top: ($(window).height() - 45) / 2
            });
        }
    
        function ajaxLoadEnd() {
            $(".datagrid-mask").remove();
            $(".datagrid-mask-msg").remove();
        }
    ```
       接着在需要的地方，如ajax的js代码中加上相关function，如下：
       
    
    ```
    $.ajax({
               url: $url,
               type: 'POST',
               dataType: 'json',
               beforeSend:function () {
                   ***ajaxLoading()***;
                   },
               success: function (data) {
                  $widget.datagrid('loadData', data);
                   ***ajaxLoadEnd()***;
                  $.slideMsg($.I18N('查询成功'));
              },error:function (xhr,status) {
                    ajaxLoadEnd();
               $.alert($,xhr.msg);
                   }
          })
    ```

发表评论取消回复

表情：

评论列表（有 0 条评论，410人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android自定义进度加载动画

Android自定义进度加载动画在开发Android应用程序时，经常需要使用进度加载动画来提升用户体验。Android提供了一些内置的进度加载动画，但有时候我们需要自定义一

Myth丶恋晨/ 2023年10月14日 18:21/ 0 赞/ 35 阅读

相关 js css loader加载等待

css .mask { background: 303030; position: fixed; left: 0;

雨点打透心脏的1/2处/ 2023年10月06日 22:06/ 0 赞/ 13 阅读

相关 axios vue 加载效果动画_Vue.js+axios+element ui 实现全局loading加载示例

Vue.js+axios+element ui 实现全局loading加载示例发布于 2020-2-27| 复制链接分享一篇关于vue+axios+element u

超、凢脫俗/ 2023年01月10日 03:52/ 0 赞/ 180 阅读

相关自定义加载loading效果（带图片）

`加载中图片，底色为白色(看不到)` ![在这里插入图片描述][20200913105608103.png_pic_center] 效果如图： ![在这里插入图片描述

青旅半醒/ 2022年12月06日 12:42/ 0 赞/ 219 阅读

相关自定义加载中的loading组件

自定义加载中的loading组件 `components / loading.vue页面` <template> <div class="loadi

男娘i/ 2022年12月03日 15:59/ 0 赞/ 159 阅读

相关 react-native 加载动画 loading效果

react-native loading动画（加载动画） 1. 组件代码(demo.js) 2. 调用 3. FAQ ![

朴灿烈づ我的快乐病毒、/ 2022年08月29日 15:53/ 0 赞/ 499 阅读

相关 cocos2d-x - loading加载动画

相信大家在玩游戏的过程中都会遇到一个loading的界面，loading界面的作用主要是为了加载游戏中需要用到的资源。在比较大型的游戏中，资源通常会占用很大的空间，如果不做一个

旧城等待，/ 2022年08月24日 14:26/ 0 赞/ 183 阅读

相关自定义JS加载等待动画loading

闲话少说，上代码：如下为加载数据时的等待css动画，效果如图： ![这里写图片描述](https://img-bl

灰太狼/ 2022年05月16日 07:10/ 0 赞/ 411 阅读

相关自定义类加载

package com.lss; import java.io.ByteArrayOutputStream; import java.io.F

红太狼/ 2022年03月20日 03:20/ 0 赞/ 286 阅读

相关 Flutter自定义一个加载动画

先上效果图： ![20190731212209531.gif][] 自定义loading.dart类 import 'package:flutter/materi

小灰灰/ 2021年11月14日 13:24/ 0 赞/ 800 阅读