Question

任何人都可以告诉我这段代码有什么问题。对我不起作用。我把大图像（大小）测试，但仍然无法正常工作。

使用DIV预先加载网站，图片预加载和JQUERY

在

上

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<style>
.modal {
    display:    none;
    position:   fixed;
    z-index:    10000000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://i.stack.imgur.com/FhHRx.gif') 
                50% 50% 
                no-repeat;
}


body.loading {
    overflow: hidden;   
}


body.loading .modal {
    display: block;
}
</style>

<script>
$body = $("body");

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


</script>

之前

<div class="modal"><!-- Place at bottom of page --></div>
</body>

Answer 1

将代码封装在内：

$(function () {
    $body = $("body");

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

在加载页面后执行。如果您不希望在开始时显示您的内容，则在加载内容之前添加类似loading的类：

<body class="loading">

预加载站点层和Jquery

1 个答案: