jquery – loading screen only when needed

Question:

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

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:

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

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

And on your screens that you are going to use, you can control the display through the code:

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

//Esconder
$(".loader").hide();
Scroll to Top