Laravel仪表盘多Widget中jQuery加载GIF无法同时显示的问题

在Laravel仪表盘的Blade模板中，日期选择器变更时统计数据更新正常，但仅第一个Widget会显示加载GIF，其余Widget无法同步展示加载状态直至数据加载完成。

问题根源 #

HTML中id属性是唯一的，你给所有加载GIF都设置了id="loadingImage"，jQuery通过$("#loadingImage")只会选中第一个匹配的元素，导致只有第一个Widget显示加载动画。

解决方案 #

步骤1：将加载GIF的id替换为class #

修改所有Widget中的加载图片标签，把id="loadingImage"改为class="loadingImage"，同时添加初始隐藏样式：

<!-- 第一个Widget修改后 -->
<div class="col-md-2" id="shopify_widget1">
    <div class="jumbotron bg-light text-dark">
        <img class="img-fluid pull-left" src="https://cdn0.iconfinder.com/data/icons/social-media-2092/100/social-35-512.png" width="32" height="32">
        <h6 class="text-dark mt-2 px-4">Shopify</h6>
        <hr class="border border-black">
        <h5 class="text-dark">Total Orders</h5>
        <img class="loadingImage img-fluid w-100" src="images/calculating-shopify-v2.gif" style="display:none;">
        <span class="tot_o" id="tot_o">{{ $tot_o }}</span> 
    </div>
</div>

<!-- 第二个Widget修改后 -->
<div class="col-md-2">
    <div class="jumbotron bg-dark text-white">
        <img class="img-fluid pull-left" src="https://cdn0.iconfinder.com/data/icons/social-media-2092/100/social-35-512.png" width="32" height="32">
        <h6 class="text-secondary mt-2 px-4">Shopify</h6>
        <hr class="border border-white">
        <h5 class="text-white">Total Sales </h5>
        <img class="loadingImage img-fluid" src="images/calculating.gif" style="display:none;">
        <span class="tot_sum" id="tot_sum">{{ $sum }}</span>  {{ $crr }}
    </div>
</div>

步骤2：修改jQuery代码中的选择器 #

将代码中所有$("#loadingImage")替换为$(".loadingImage")，同时添加请求失败时的隐藏逻辑：

<script>
$(document).on('change', '#date', function (e) {
    $('#tot_o').empty(); 
    $('#tot_sum').empty(); 
    $('#avg_ov').empty(); 
    $('#cus').empty();
    $('#item_sum').empty();
    $('#orders').empty();
    
    // 显示所有加载GIF
    $(".loadingImage").show();

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $.ajax({
        type: 'GET',
        url : '/shopify_data',
        data : {selected_date : $('#date').val()},
        success:function(data){
            // 隐藏所有加载GIF
            $(".loadingImage").hide();
            var total_orders = data.tot_o;
            var total_sales = data.sum;
            var currency = data.crr;
            var avg_ov = data.avg_ov;
            var cus = data.cus;
            var item_sum = data.item_sum;
            var orders = data.orders;
            $('#tot_o').append(total_orders);
            $('#tot_sum').append(total_sales);
            $('#avg_ov').append(avg_ov);
            $('#cus').append(cus);
            $('#item_sum').append(item_sum);
            $('#orders').append(orders);
        },
        timeout:10000,
        // 请求失败/超时也隐藏加载动画
        error:function(){
            $(".loadingImage").hide();
        }
    });
});    
</script>

步骤3：验证效果 #

选择日期后，所有Widget的加载GIF会同时显示；数据加载完成（或请求超时/失败）后，所有加载GIF会同时隐藏并更新统计数据。

内容的提问来源于stack exchange，提问作者nikamata hukamuko