自定义JS加载等待动画loading

最新推荐文章于 2025-03-13 00:05:17 发布

zerovpp

最新推荐文章于 2025-03-13 00:05:17 发布

阅读量5k

点赞数

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

本文链接：https://blog.youkuaiyun.com/zerovpp/article/details/81774831

版权

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

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

     闲话少说，上代码：
 
      如下为加载数据时的等待css动画，效果如图：
      ![这里写图片描述](https://img-blog.youkuaiyun.com/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

最低0.47元/天解锁文章