Tela de loading somente quando necessário

[Rafael Macedo]

Estou querendo colocar uma tela de loading mas somente em lugares que demoram para carregar 

jquery

<script type="text/javascript">

jQuery(document).ready(function($) {  

$(window).load(function(){

$('.loader').fadeOut('fast',function(){$(this).remove();});

});

    console.log("document loaded!");

});

</script> 

 css

.loader {

    position: fixed;

    left: 0px;

    top: 0px;

    right: 0;

    bottom: 0;

    width: 100%;

    height: 100%;

    z-index: 99999;

    background: url("#{resource['/compracam/images/loadin2.gif']}") !important;

    opacity: .8;

}

[Luiz Paulo Valença]

Fala Rafael, tudo certo cara.

Bom pelo que entendi, acho que isso aqui vai te ajudar(https://jsfiddle.net/luizpaulo165/sb8yac3q/1/).

$(function(){
// função para o loading
function callLoading(timeOutLoad){
        $(".loader").addClass("active");
  
  setTimeout(function(){
        $(".loader").removeClass("active");
  }, timeOutLoad);
}

// click no button
 $(".active-load").on("click", function(){
        // chama a função do load
  callLoading(3000);
 });
 
});

<button class="btn active-load">ativar load</button>
<div class="loader"></div>

.loader {
    position: fixed;
    left: 0px;
    top: 0px;

    width: 100%;
    height: 100%;
    z-index: 99999;

    background: url(https://media.tenor.com/images/a8af247d50aa3638ea92a5638ba82644/tenor.gif) no-repeat center center / 50%;
    background-color:rgba(0,0,0,0.5);
    opacity:0;
    display:none;
    transition:0.5s;
}
.loader.active{
  display:block;
  opacity:1;
  transition:0.5s;
}

.btn{
  background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

Lembrando que se o que você pretende fazer utiliza Ajax, ai muda um pouco. Mas se for para apenas chamar o que te passei rola de boa.

Espero que ajude, qualquer coisa é só chamar.