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

时间:2012-12-19 10:13:38

标签: jquery css

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

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

但是第一次加载页面时这不起作用。我想在登录我的网站后立即显示此加载图片,直到页面内容完全加载为止。您能帮助我。感谢。

1 个答案:

答案 0 :(得分:0)

请记住在关闭标题之前放置此代码。

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