标签：function body showLoading loading image landing js data 加载

1.先写一个遮罩层和动态图片

loading = {
    show: function () {
      var html = '<div class="loading_image aiabase parbase section" tabindex="-1"' +
        'style="overflow: hidden; position: fixed;top: 0;right: 0;bottom: 0;left: 0;min-width: 320px;z-index: 1050;outline: 0;background: rgba(0, 0, 0, 0.4);">' +
        '<div class="landing" style="height: 100%;display: flex;align-items: center;flex-direction: column;justify-content: center;">' +
        '<img src="src/img/moving-loading.gif" style="width: 30%;max-width: 150px;"/>' +
        '</div></div>';
      $('body').append(html);
      $('body').addClass('loading_body');
    },
    hide: function () {
      if ($('.loading_image')) {
        $('.loading_image').remove();
        $('body').removeClass('loading_body');
      }
    },
  }

2.加在ajax 中

function ajaxForSth(data, successCallback, errorCallback, optionToken) {
    if (!$('.loading_image').html()) {
        loading.show();
    }
    var showLoading = false; // 标志
    var options = {
        type: 'POST',
        dataType: 'json',
        data: data,
        headers: { 'Content-Type': 'application/json' },
        url: url,
        cache: false,
        headers: { Authorization: "Bearer " + optionToken },
    };
    $.ajax(options).done(function (data) {
        if (!showLoading) {
            ctx.loading.hide();
        }
        if (typeof (successCallback) == 'function') {
            successCallback(data);
        }
    }).fail(function (jqXHR, status, errorThrown) {
        if (!showLoading) {
            ctx.loading.hide();
        }
        if (jqXHR.status == 401 && typeof (errorCallbackFour) == 'function') {
            errorCallbackF(jqXHR, status, errorThrown);
        }
    });
}

就实现了。

标签：function,body,showLoading,loading,image,landing,js,data,加载
来源： https://blog.csdn.net/ParisT_T/article/details/114634044

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。