打开网站时，无需点击即可显示加载的GIF

Question

我在点击范围案例中加载了一个加载gif。问题在于，当网站收费出现时，这个gif没有舔过跨度。

看看这个：

我想仅在用户点击某个范围时才显示gif。

脚本如下：

<!-- This is the span -->

<span class="label label-<?=$tag?><?=$selected?" selected":" hidden-print"?> customer-<?=$i?>" onclick="connect('customer-<?=$i?>', '<?=$customer?>', '<?=$tag?>');"><?=$tag?></span><?

<!-- This is the function for onClick case -->

    <script>
  function connect(customerId, customerValue, tagValue){
    var label = $("span.label-"+tagValue+"."+customerId);
    var connectar = !label.hasClass('selected');
    console.log("haciendo " + connectar + " la conexión entre " + customerValue + " y " + tagValue);
    $(document).ajaxStart(function(){
        $('#loader').show();
    }).ajaxComplete(function(){
        $('#loader').hide();
    });
    $.getJSON( "/api/connect.php?customerId="+customerValue+"&tagId="+tagValue+"&connect="+connectar, function( data ) {
      console.log('error: ' + data.error);
      if(data.error == "false"){
        if(data.connected == "true"){
          label.addClass("selected");
          label.removeClass("hidden-print");
        }
        if(data.connected == "false"){
          label.removeClass("selected");
          label.addClass("hidden-print");
        }
      }
    });
  }
    </script>

问题出在哪里？

PD：customerId，customerValue和tagValue只是在数据库中插入数据的参数。申请gif的过程是在ajaxStart和ajaxComplete中。

方面

UPDATE！

<!-- The gif is here -->

<img id="loader" src="loading.gif" alt="loading"/>

#loader{ 
  display:none; 
}

以下是所有css：

/*th.tag {
  text-align:center;
}

td.tag {
  text-align:center;
}*/

.main{
  max-width:768px;
}

.container-striped > div.customer:nth-child(odd){
  background-color: #f9f9f9;
}

div.row.customer{
  margin-top: 5px;
  margin-bottom: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
}
/*div.customer-name{
  background-color: #e7e7e7;
}*/

.label{
  background-color: #808080;
}

/* @group tag colors */

.label.label-Detallista{
  background-color: rgba(255, 0, 190, 0.22);
}

.label.label-Detallista.selected{
  background-color: #ff00bf;
}

.label.label-Emprendedor{
  background-color: rgba(8, 8, 138, 0.19);
}

.label.label-Emprendedor.selected{
  background-color: #08088A;
}

.label.label-Creativo{
  background-color: rgba(215, 223, 0, 0.24);
}

.label.label-Creativo.selected{
  background-color: #D7DF01;
}

#loader{ 
  display:none; 
}

/* @end */