Question

我试图在ajax post请求发送时显示加载gif图像。实际上我的代码是通过画布捕获图像，这个图像渲染并转到php页面进行保存。这个php文件保存并返回图像。现在我需要在请求发布时显示加载图像，并在ajax请求完成时隐藏加载图像。任何人都知道如何做到这一点？

的JavaScript

function capture() {
    $('.showcase').html2canvas({
        onrendered: function (canvas) {
            //Set hidden field's value to image data (base-64 string)
            $('#img_val').val(canvas.toDataURL("image/png"));
            //Show loading image
            $("#preview-loading").html('<img src="editor/loader.gif" alt="Uploading...."/>');
            //Submit the form with ajax function
            $("#myForm").ajaxForm({
                target: '#preview-des'
            }).submit();
        }
    });
}

HTML

<div id="preview-loading"></div>
<div  id="preview-des"></div>
<form method="post" action="editor/save.php" enctype="multipart/form-data" id="myForm">
    <input type="hidden" name="img_val" id="img_val" value="" />
</form>

Answer 1

尝试使用如下的全局方法或使用回调。

$(document).ajaxStart(function() {
    $('img').show(); // show the gif image when ajax starts
}).ajaxStop(function() {
    $('img').hide(); // hide the gif image when ajax completes
});

已预加载gif图像（默认隐藏）

Answer 2

您可以通过表单中的ajax =“true”执行此操作，然后为此编写脚本

<form method="post" action="/echo/html/" ajax="true">
   <label>
      <img id="loadingimg" src="http://dev.cloudcell.co.uk/bin/loading.gif"/>   
   </label>
   <input type="submit" value="Submit" />      
</form>

设置

的样式

img#loadingimg{
  display: none;                   
}

的script.js

$(document).ready(function(e) {
  $("form[ajax=true]").submit(function(e) {
    e.preventDefault();
    $("#loadingimg").show();
  }); 
});

工作小提琴在这里找到：http://jsfiddle.net/clickthelink/Uwcuz/1/

如何在请求进入Ajax时显示加载gif

2 个答案: