动态标签会淡入“没有最新结果”

Question

我已经花了很长时间研究这个问题，当用户单击选项卡时，将首先显示加载的gif，如果该选项卡上没有匹配项或数据，它将返回“ No Matches Found”。 这是我的代码：

//this is divs:
       <div id="preload">
           <center><img src="{{ asset('/images/loading.gif')}}"></center>
        </div>
        <div id="norecent">
        @foreach(\App\Match::mainMatches()->where('leagues.type','=','csgo')->where('matches.status',['open','ongoing'])->get() as $match))
           <center><span>No Matches Available.</span></center>
        @endforeach
        </div>

//this is the part where the gif appears on the loading of the page
<script>
$(function(){
    $("#preload").fadeOut(800, function(){
        $(".box").fadeIn(700);
    });
});
</script>
 <script type="text/javascript">
  $(document).ready(function(){
  // Hide displayed paragraphs

$(document).ajaxStart(function(){
    $("#preload").css("display","block");
});
$(document).ajaxComplete(function(){
    $("#preload").css("display","none");
});
//all match tab
$(".all-match-button").click(function(){

    $(".box").load('{{ url('allmatch') }}');
    $(".btnall").attr('style','display: block !important');
    $(".btndota").attr('style','display: none !important');
    $(".btncsgo").attr('style','display: none !important');
    $(".btnsports").attr('style','display: none !important');
    $(".matchmain").hide();
});


//dota 2 tab
$(".dota-match-button").click(function(){
    $(".box").load('{{ url('dota2') }}');
    $(".btndota").attr('style','display: block !important');
    $(".btncsgo").attr('style','display: none !important');
    $(".btnsports").attr('style','display: none !important');
    $(".hidebtn").hide();
    $(".matchmain").hide();
});

//csgo tab
$(".csgo-match-button").click(function(){

    $(".box").load('{{ url('csgo') }}');
    $(".btncsgo").attr('style','display: block !important');
    $(".btndota").attr('style','display: none !important');
    $(".btnsports").attr('style','display: none !important');
    $(".hidebtn").hide();
    $(".matchmain").hide();
});

//sports tab
$(".sports-match-button").click(function(){
   $(".box").load('{{ url('sports') }}');
    $(".btnsports").attr('style','display: block !important');
    $(".btndota").attr('style','display: none !important');
    $(".btncsgo").attr('style','display: none !important');
    $(".hidebtn").hide();
    $(".matchmain").hide();
});

});
</script>

所以基本上，div“ norecent”只是一组示例，如果容器为空，则csgo选项卡将显示“ no match available”。任何想法如何做到这一点？ TYIA！