在点击加载页面之前显示加载

Question

$("#button").click(function(){
    $(document).ready(function() {
        $('#wrapper').load('page.php');
    });
});
<div id="wrapper"></div>
<div id="button">click me</div>

我想在点击#button之后发送（加载）page.php 之前显示加载

Answer 1

这是 jsfiddle 脚本 https://jsfiddle.net/1uwopptv/ 或内联脚本，假设这是您想要的。请求完成后，您可以再次隐藏加载 gif。

$("#button").click(function(){
    $('#img').show(); 
    $('#button').hide(); 
    $(document).ready(function() {
        $('#wrapper').load('page.php');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper"></div>
<div id="button">click me</div>
<img src="https://loading.io/assets/img/landing/curved-bars.svg" id="img" style="display:none"/ >

Disclaimer：使用的图片属于网站 loading.io，在第一次谷歌搜索中出现。