Question

我在JSP中使用这些代码来显示页面加载时的加载图像：

  <style type="text/css">
                .loader {
                position: fixed;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                z-index: 9999;
                background: url('${contextPath}/images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
                }
            </style> 

<script type="text/javascript">
$(window).load(function() {
    $(".loader").fadeOut("slow");
})
</script>

<div class="loader"></div>

它工作正常。现在，我想在点击带有这些代码的链接后显示相同的图像

<script type="text/javascript">    
$(document).ready(function () {
    $('a').click( function(e) {
        $(".loader").fadeOut("slow");
        } )
    });
</script>

但它根本不起作用

Answer 1

请参考以下代码：）

$(document).ready(function() {
      alert('hiding loader and showing body')
      $('.loader').hide();
      $('.body').show();
});

.loader {
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: red;
}
.body{
  background:#DDD;  
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="loader">Loading...</div>
<div class="body">After load</div>

Answer 2

<script type="text/javascript">    
$(document).ready(function () {
    $('a').click( function(e) {
        $(".loader").fadeIn("slow");
        } )
    });
</script>

JSP：页面加载时显示加载图像

2 个答案: