先前寫過一篇有關 Jquery 使用AJAX 可以有Loading的文章。
http://expect7.pixnet.net/blog/post/39829979/
可是後來發現到，在chrome跟Firefoxy都可以正常運作，但是在IE是無法正常運作。
問題出在 JQuery AJAX的參數 async: false。
這個參數是設定是否允許同步處理，簡單說設true，他會允許通時間可以傳送很多AJAX的資訊出去。但是如果設為False，在chrome跟Firefoxy中，網頁會成現假死狀態，他還是可以在網頁上輸入東西或是其它動作，只是沒辦法使用AJAX在傳送東西。但是在IE，他會把整個網頁鎖住，如果AJAX處理過久，又沒有顯是提文字，就會讓人以為網頁當掉了。
後來改了一下，讓大家參考一下。
|
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<script>
var AJAX_Work=function(inputURL){
$.ajax({
url: inputURL,
data: $('#sentToBack').serialize(),
type:"POST",
dataType:'text',
async: false,
success: function(msg){
alert(msg);
},
beforeSend:function(){
},
complete:function(){
$('#loadingIMG').hide();
},
error:function(xhr, ajaxOptions, thrownError){
alert(xhr.status);
alert(thrownError);
}
});
}
var Submit=function(){
var URLs="back.php";
$('#loadingIMG').show();
setTimeout(function(){
AJAX_Work(URLs,"");
},1);
}
</script>
</head>
<body>
<form id="sentToBack">
<input type="text" name="Text"/>
<input type="button" value="送出" onClick="Submit()"/>
</form>
<div id="loadingIMG" style="display:none"><img src="loading.gif" height='14'/>資料處理中，請稍後。</div>
</body>
</html>
|
這樣子就可以正常顯示了。
改念上就是在他開始跑AJAX之前先把Loading的畫面叫出來，等到他結束了之後，在把畫面給關了。
可是我相信有人會問為什麼要加上setTimeout？因為我測過，如果不加上setTimeout，電腦會來不及顯示就會被鎖住了。
還有show裡面步要帶slow，不然也沒辦法正常運作。
希望大家提供更多資訊給我參考，這是我目前的解法，不是很好，可是勉強堪用。
留言列表
