超简单半透明的Ajax加载提示Loader

当Ajax异步加载或处理数据时，往往页面没有任何的反应，只能等待！如果能够在Ajax开始请求时开始显示加载的图标，当处理完毕后关闭加载的提示，就会更加友好一些！如下图所示：

下面我们就开始制作加载的图标，主要思路就是：加载图标其实就是一个DIV层，居于页面的中间位置；在没有任何加载时，隐藏不显示；当Ajax处理数据时显示出来，我们这里采用jQuery的淡入淡出效果！

下面我们就来开始制作：

第一步：制作一个加载图标（含CSS样式）

<!-- 加载图标样式 -->
<style>
    .deploy_ctype_tip{z-index:1001;width:100%;text-align:center;position:fixed;top:50%;display:none}
    .deploy_ctype_tip i{position:absolute;color:#45B39D;opacity:0.6;top:-15px;}
</style>
<!-- 设置加载图标 -->
<div id="preloader" class="deploy_ctype_tip"><i class="fa fa-4x fa-spinner fa-spin"></i></div>

第二步：Javascript方法统一淡入淡出提示

在页面加载完成时，该图标处于隐藏状态；这里通过True或者False的参数形式设定。True表示淡入，反之淡出。

// 加载图标的显示与隐藏
function setLoaderIn(isIn){
    //取得对象
    var loader = document.getElementById("preloader");
    if (isIn==true) {
        loader.style.display="";
        $("#preloader").fadeIn(300);
    } else {
        loader.style.display="none";
        $("#preloader").fadeOut(300);
    }
}

第三步：在需要的位置淡入淡出图标

比如下面的示例代码：

/**
 * Ajax动态更新数据并异步刷新页面
 * @Author   DuDongHua
 * @DateTime 2018-04-28T21:21:23+0800
 * @param {对象} Button     表单按钮对象
 * @param {文本} Modal      模块
 * @param {文本} Controller 控制器
 * @param {文本} Action     方法
 * @param {文本} Location   Ajax加载页面的位置id
 * 使用方法：表单对象不用提交的任何设置，提交假按钮<a>设置onclick即可
 * 注意：
 *     1.  在javascript中拼接Thinkphp5的URL地址，不需要"{:url('" + Modal + "/" + Controller + "/" + Page + "')}方法
 *         只需要直接拼接地址即可，如：var MeURL = '/'+Modal+'/'+Controller+'/'+Page;
 */
function EditData(Button,Modal,Controller,Action,Location,Page){
    // 设置默认参数
    var Modal       = arguments[1] ? arguments[1] : "admin";     // 模块名
    var Controller  = arguments[2] ? arguments[2] : "index";     // 控制器
    var Action      = arguments[3] ? arguments[3] : "editData";  // 方法名
    var Location    = arguments[4] ? arguments[4] : "content";   // Ajax加载页面的位置id
    var Page        = arguments[5] ? arguments[5] : "index";     // Ajax加载页面控制器中的方法
    // 生成本页面的url用于更新后异步刷新
    var MeURL = '/'+Modal+'/'+Controller+'/'+Page;
    setLoaderIn(true); //打开加载图标
    // 异步请求数据
    $.ajax({
        url:  '/'+Modal+'/'+Controller+'/'+Action,
        type: 'POST',
        data: $(Button).closest("form").serialize(),  //表单序列化
        dataType: 'json',
        success: function(data){
            // 更新页面并提示
            // window.location.reload(); //当加载整个页面时有效但ajax更新时加载到主页
            loadAjaxHTML(MeURL,Location);
            showMsg(data.msg);
            setLoaderIn(false); //关闭加载图标
            // showTips(data.msg);
        },
        error:function(XMLHttpRequest, textStatus, errorThrown){
            showMsg(XMLHttpRequest.status+" "+XMLHttpRequest.readyState,textStatus,"red","#f60");
        }
    });
}