如何在完成加载之前制作图像，AJAX jQuery
如何在完成加载之前制作图像，AJAX jQuery
提问于 2016-09-12 14:07:06
我想制作一个图像，显示下载过程正在进行中，以完成带来页面(2014.php)，如wait.gif：
我的示例代码不工作！我需要使等待图像，直到页面加载...我的页面(2014.php)在这几分钟内我需要制作等待图像
$('#data').load('test.php');示例：
<button>Click</button>
<div id="data"></div>
<script>
$(document).ready(function(){
$('button').click(function(){
$('#data').html('<img src="wait.gif" />');
jQuery.ajax({
url: "2014.php",
success:function(data){$('#data').html(data);}
});
});
});
</script>回答 2
Stack Overflow用户
发布于 2016-09-12 22:45:05
首先，将图像放到页面上，只需使用CSS隐藏它，在您想要显示它时显示它，并在完成AJAX查询时隐藏它：
HTML：
<button>Click</button>
<img src="wait.gif" class="imgWait" />
<div id="data"></div>CSS：
.imgWait {
display: none;
}Javascript：
<script>
$(document).ready(function(){
var $imgWait = $(".imgWait"); //cache your img reference in a variable
$('button').click(function(){
$imgWait.show(); //show the waiting image
jQuery.ajax({
url: "2014.php",
success:function(data){
$('#data').html(data);
$imgWait.hide(); //hide the waiting image after success
}
});
});
});
</script>Stack Overflow用户
发布于 2016-09-12 14:27:30
如果您正在寻找一个“加载”生成器来创建您的加载映像，有许多在线免费服务，例如：
http://www.loading.io
http://www.ajaxload.info
http://preloaders.net我简单地搜索了一下"Ajax加载器“。
你只需选择一个设计，设置一些其他选项(可选)，最后为你生成gif动画。
希望它能帮上点忙！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39444216
复制相关文章
相似问题
腾讯云开发者
