Eu tenho outra solução abaixo simples para isso que funcionou perfeitamente para mim.
Primeiro, crie um CSS com o nome Lockon class, que é uma sobreposição transparente junto com o carregamento do GIF, como mostrado abaixo
.LockOn {
display: block;
visibility: visible;
position: absolute;
z-index: 999;
top: 0px;
left: 0px;
width: 105%;
height: 105%;
background-color:white;
vertical-align:bottom;
padding-top: 20%;
filter: alpha(opacity=75);
opacity: 0.75;
font-size:large;
color:blue;
font-style:italic;
font-weight:400;
background-image: url("../Common/loadingGIF.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
Agora precisamos criar nossa div com essa classe, que cubra a página inteira como uma sobreposição sempre que a página estiver sendo carregada
<div id="coverScreen" class="LockOn">
</div>
Agora, precisamos ocultar essa tela de capa sempre que a página estiver pronta e para que possamos impedir o usuário de clicar / disparar qualquer evento até que a página esteja pronta
$(window).on('load', function () {
$("#coverScreen").hide();
});
A solução acima ficará boa sempre que a página estiver carregando.
Agora, a pergunta é depois que a página é carregada, sempre que clicar em um botão ou evento que levará muito tempo, precisamos mostrar isso no evento de clique do cliente, como mostrado abaixo
$("#ucNoteGrid_grdViewNotes_ctl01_btnPrint").click(function () {
$("#coverScreen").show();
});
Isso significa que, quando clicarmos neste botão de impressão (que levará muito tempo para fornecer o relatório), ele mostrará nossa tela de capa com GIF, o que dará resultado e, quando a página estiver pronta acima, a função windows on load será acionada e ocultará a tela de capa quando a tela estiver totalmente carregada.