3

I am trying to show loading gif image while ajax post request sends. Actually my code is capturing image via canvas and this image renders and goes to php page for saving. This php file saves and returns the image. Now I need show the loading image while request post and hide the loading image while ajax request finishes. Anyone have idea how I can do this?

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;                   
}

script.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 に答える