$ .Ajax使用jquery發送進度條

嗨別人
我使用$ .ajax功能發送數據到服務器，並且使用此方法刪除了大部分回發頁面，但它需要一些進度條才能顯示訪問者現在有一些進展，它顯示結果後什麼也沒有顯示，但我認爲我的網站需要一條消息或小圖片。我如何用簡單的jQuery代碼實現它？彈出並顯示頁面正在進行中。

而且我還需要添加一些其他的jquery來防止在進程中進行其他的點擊操作嗎？

來源

2010-12-23 kamiar3001

你可以做這樣的事情

$("elemnt").click(function(){ 
    $("loader-img").show(); 

    $.ajax({ 
     url : "your url", 
     complete: function(){ 
      $("loader-img").hide(); 
     } 
    });  
});

裝載機的圖像可以是網頁阻止格，從在該中心與圖像做任何事情阻止用戶視。

這裏使用了完整的事件，因爲在成功/失敗的ajax請求的情況下調用此事件。

EDITED 你可以做這樣的事情

<style type="text/css"> 
    .blocker{ 
     z-index: 99999; 
     opacity: .5; 
     height: 100px; 
     position: fixed; 
     background: none repeat scroll 0 0 lightgrey; 
     width: 100%; 
    } 

    .blocker .img{ 
     position: fixed; 
     color: red; 
    } 
</style> 

<body> 
    <div class="blocker" style="display: none"> 
     <div class="img">img</div> 
    </div> 
    ............. 
    ............. 
    .............

然後在腳本

function showBlocker(){ 
    $(".blocker .img").css({ 
     top: $(window).height()/2, 
     left: $(window).width()/2 
    }); 
    $(".blocker").show().css({ 
     height: $(document).height() 
    }); 
}

然後調用showBlocker()方法來顯示攔截。

您可以調整答案以適應您的需求。這只是一個示例如何實現

來源

2010-12-23 06:48:10

阻擋div的絕對位置必須是頁面的中心以防止點擊是您的意思？ – kamiar3001 2010-12-23 06:56:49

您可以在AJAX調用開始之前顯示加載圖像，然後將其隱藏在回調函數中。

喜歡的東西

// handler for ajax trigger 
$("#yourelement").click(function(){ 
    // your loading image object 
    $("#yourimage").show(); 
    $.ajax({ 
     url: 'ajax/test.html', 
     success: function(data) { 
     $("#yourimage").hide(); 
     } 
    }); 
});

來源

2010-12-23 06:37:07 rahul

$ .Ajax使用jquery發送進度條

回答

相關問題