自定义JS加载等待动画loading

最新推荐文章于 2024-09-09 15:34:01 发布

zerovpp

最新推荐文章于 2024-09-09 15:34:01 发布

阅读量4.9k

点赞数

分类专栏： js 文章标签： js load

本文链接：https://blog.csdn.net/zerovpp/article/details/81774831

版权

本文展示了如何使用jQuery EasyUI创建一个自定义的加载等待动画。通过调用`ajaxLoading()`和`ajaxLoadEnd()`函数，可以在AJAX请求开始时显示动画，并在请求完成后移除。代码中提供了CSS动画效果的实现，以及在AJAX请求前后调用相关函数的例子。

摘要由CSDN通过智能技术生成

     闲话少说，上代码：
 
      如下为加载数据时的等待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").re