Loading screen only when necessary

Question

I made a loading screen so I would like to make it work only when it is a time-consuming action and not with any load.

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;
} 

Answer 1

You can include the HTML part in the master part of your project and include the code in your css:

    .loader {
       ....
       display:none;
    }

And on your screens that will use you can control the display of it through the code:

//Exibir
$(".loader").show();

//Esconder
$(".loader").hide();