javascript - 单击加载页面之前显示加载

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"/ >

免责声明:使用的图像属于网站loading.io，如第一次谷歌搜索中出现的那样。