jquery - 第一次加载页面时显示加载图像

Question

当某些内容需要时间加载时，我正在使用以下内容显示加载图像。

<div class="divLoading"></div>

JS：

$("body").on({
    ajaxStart: function () {
        $(this).addClass("loading");
    },
    ajaxStop: function () {
        $(this).removeClass("loading");
    }
});

CSS

.divLoading {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
            url('../../Images/ajax-loader.gif') 
            50% 50% 
            no-repeat;
}  
body.loading {
    overflow: hidden;   
}
body.loading .divLoading {
    display: block;
}

但这在第一次加载页面时不起作用。我想在登录我的网站后立即显示此加载图像，直到页面内容完全加载。请您帮我解决一下。谢谢。

Answer 1

Remember to put this code before closing head tag.

<script>
$(window).load(function(){
  $('#dvLoading').fadeOut(2000);
});
</script>