データの処理中にgifをロードし、jQueryフォームUIでアニメーションをフェードインする実装

Question

jqueryフォーム（http://jquery.malsup.com/form/）を使用してこのページでフォームを送信しています：http://licf.ronaldboadi.com/practice/test.html

<script type="text/javascript"> 
// prepare the form when the DOM is ready 
$(document).ready(function() { 
    var options = { 
     target:  '#submitform', // target element(s) to be updated with server response 
     beforeSubmit: showRequest, // pre-submit callback 
     success:  showResponse // post-submit callback 

     // $.ajax options can be used here too, for example: 
     //timeout: 3000 
    }; 

    // bind to the form's submit event 
    $('#camperapplicationForm').submit(function() { 
     // inside event callbacks 'this' is the DOM element so we first 
     // wrap it in a jQuery object and then invoke ajaxSubmit 
     $(this).ajaxSubmit(options); 

     // !!! Important !!! 
     // always return false to prevent standard browser submit and page navigation 
     return false; 
    }); 
}); 

// pre-submit callback 
function showRequest(formData, jqForm, options) { 
    var queryString = $.param(formData); 
    // var formElement = jqForm[0]; 

    alert('About to submit: \n\n' + queryString); 
    return true; 
} 

// post-submit callback 
function showResponse(responseText, statusText, xhr, $form) { 
    alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + 
     '\n\nThe output div should have already been updated with the responseText.'); 
} 
</script> 

私はデータを処理していながら、負荷のGIFを使用して落ち着いてきたと私はdivの準備ができたら、私はアニメーションでフェードを使用することができます。ここでは以下のコードです。

これは、フォームを送信するときに単純なimg要素（gifを読み込む）をdivに追加することを含みます。たとえば、$ .ajax呼び出しの成功メソッドなどの結果が得られたら、divを非表示にしてimg要素をサーバーから取得した結果で置き換え、アニメーションにフェードを追加する必要があります。

しかし私は私の現在のコードに以下のコードをどのように実装できるのだろうかと思っています。

//Assuming you have a $.ajax request to submit the form: 

//add the loading gif 
$('#submitform').html('<img src="loading.gif" />'); 

//send your form data 
$.ajax({ 
    url: "process.php", 
    data: { 
     param1: 1, 
     param2: 2, 
     param3: 3 
    }, 
    success: function(data){ 
     //hide the div, assuming the process.php return simple html code to your page update the div content, then add the fade in animation 
     $('#submitform').hide().html(data).fadeIn('slow'); 
    } 
}); 

Answer 1

あなたはそうのようにそれを行うことがあります。

var siteUrl = 'http://localhost/'; 

//send your form data 
$.ajax({ 
    url: "process.php", 
    data: { 
     param1: 1, 
     param2: 2, 
     param3: 3 
    }, 
    beforeSend:function(){ 
     $('#main').append('<div class="loading"><img src="' + siteUrl + 'resources/imgs/ajax-loader.gif" alt="Loading..." /></div>'); 
    }, 
    success: function(data){ 
     $('.loading').remove(); 
     //hide the div, assuming the process.php return simple html code to your page update the div content, then add the fade in animation 
     $('#submitform').hide().html(data).fadeIn('slow'); 
    } 
}); 

更新

私の解決策は、あなたが投稿jQueryのAjaxコードのためです。そのオプションのドキュメントhttp://jquery.malsup.com/form/#options-objectに応じmalsupについて、あなたは試すことがあります。アイデアだ

//Show loading image before submit 
beforeSubmit: function(arr, $form, options) { 
    $('#main').append('<div class="loading"><img src="' + siteUrl + 'resources/imgs/ajax-loader.gif" alt="Loading..." /></div>'); 
} 
//Remove loading image after response 
function showResponse(responseText, statusText, xhr, $form) { 
    $('.loading').remove(); 
    alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + 
     '\n\nThe output div should have already been updated with the responseText.'); 
} 

を...

Answer 2

あなたの負荷インジケータを表示/非表示するjQueryのajaxStartとajaxStopイベントを使用することができます。これは、ajax呼び出しを行うたびにjQueryによって自動的に呼び出されます。

$("#loadingIndicator") 
.bind('ajaxStart', function() { 
    $(this).show(); 
}) 
.bind('ajaxStop', function() { 
    $(this).hide(); 
});