Tela de loading so quando necessário

Front-end JavaScript
,
#1

Fiz uma tela de loading so que eu gostaria de fazer ela funcionar somente quando for uma ação demorada e não com qualquer carregamento.

JQUERY

<script type="text/javascript">

$(window).load(function() {
    $(".loader").fadeOut("slow");
});

</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;
}
#2

Você teria que fazer algo nesse sentido:


$.ajax({
  type: 'GET',
  url: '/echo/json/',
  // Antes de iniciar a request, você consegue disparar
  // eventos http://api.jquery.com/Ajax_Events/
  beforeSend: function() {
    atrasoMaximoPermitido()
  },
  success: function(data) {
    $("#respostaRequest").html('Sua requisição acabou!')
  },
})

// Essa função calcula o tempo máximo permitido
function atrasoMaximoPermitido() {
	// Inicialmente sua função irá informar o início da request
	$("#respostaRequest")
    	.html('Iniciando sua requisição...')
      
	var tempo_em_ms = 2000
        // Após 2s, irá informar que a request está demorando
        timeoutID = window.setTimeout(function(){

          $("#respostaRequest")
    	    .html('A requisição está demorando um pouco, aguarde, por favor.')
        }, tempo_em_ms)
}

Esse código não foi testado :stuck_out_tongue: