3

我试图在发送 ajax 发布请求时显示加载 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>
4

2 回答 2

9

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

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

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

于 2013-11-06T13:54:01.480 回答
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;                   
}

脚本.js

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

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

于 2014-02-01T07:23:53.350 回答