如何根據不同的ajax調用顯示不同的preloader gif？

我目前使用我的AJAX預加載GIF與此代碼調用：如何根據不同的ajax調用顯示不同的preloader gif？

$(document).ajaxStart(function() { 
    var position = $('#parentDiv').position(); 
    position.left += (($('#parentDiv').width()/2) - ($('#bigPreloader').width()/2)); 
    position.top += (($('#parentDiv').height()/2) - ($('#bigPreloader').height()/2)); 
    $('#bigPreloader').css(position).show(); 
    $('#bigPreloader').show(); 
}).ajaxStop(function() { 
    $('#bigPreloader').hide(); 
});

在上面的代碼，#parentDiv佔據了大部分的頁面，並預加載爲250x250的像素，在＃居中parentDiv。

這工作得很好，但我剛纔補充說，與特定輸入相關聯的一些額外的Ajax調用，而不是整個頁面。我有一個小的預加載器（14x14像素），我打算將其放入適當的輸入本身。

是否有內部ajaxStart一個方法來確定哪些Ajax調用被做？或者有沒有辦法讓多個ajaxStart鏈接到特定的元素？

SOLUTION

$(document).ajaxSend(function (event, jqxhr, settings) { 
    if (settings.url.indexOf('LoadInputData') == -1) { 
     var position = $('#parentDiv').position(); 
     position.left += (($('#parentDiv').width()/2) - ($('#bigPreloader').width()/2)); 
     position.top += (($('#parentDiv').height()/2) - ($('#bigPreloader').height()/2)); 
     $('#bigPreloader').css(position).show(); 
     $('#bigPreloader').show(); 
    } else { 
     $('#inputLoad').removeClass('notActive').addClass('isActive'); 
    } 
}).ajaxStop(function() { 
    if ($('#bigPreloader').is(':visible')) { 
     $('#bigPreloader').hide(); 
    } else { 
     $('#inputLoad').removeClass('isActive').addClass('notActive'); 
    } 
});

來源

2013-02-21 ESDictor

我們可以看到小提琴一些代碼？可能對你的url進行一些小的修改，比如**添加querystring **（url +「？largerpreloader」/ url +「？smallerLoader」）可能會幫助你做同樣的事情。這些應該由調用者方法決定，並根據url查詢字符串加載預加載。** – 2013-02-21 15:19:00

我不知道如何模仿裏面的jsfiddle Ajax調用。我希望有一個參數可以在.ajaxStart函數調用中使用，但似乎沒有。 – ESDictor 2013-02-21 15:25:09

的.ajaxStart（）將只火，如果所有其他呼叫已經完成。如果沒有請求正在進行，它會在ajaxStart中激發代碼。因此，如果您使用異步請求，除非所有先前的請求都已完成運行，否則此方法不會有太大幫助。

爲了解決你的問題，我建議使用.ajaxSend()方法來代替。這個方法每次都會在請求即將發出之前觸發。所以它和.ajaxStart（）幾乎是一樣的。爲區分請求，可以使用傳遞給處理函數的參數。有幾件事情，你可以測試，但可能最簡單的只是去的URL，就像這樣：從jQuery的文檔

例：

$(document).ajaxSend(function(event, jqxhr, settings) { 
    if (settings.url == "ajax/test.html") { //Test by URL 
     //Do your specific pre-loader stuff here 
    } 
});

您還可以設置您的具體要求的上下文。這樣做將設置$(this)選擇到指定的範圍內，從而使你可以在邏輯從DOM分離爲好。這樣，您可以使用加載程序設置一個函數，將其發佈到您在上下文中設置的元素上。

$.ajax({ 
    url: "test.html", 
    context: document.body 
}).done(function() { 
    $(this).addClass("done"); //$(this) is the document.body or could be the element you want to put your specific loader in. 
});

來源

2013-02-21 15:33:28

這正是我所期待的！我向兩個預加載器.isPreloader中添加了一個類，這樣我就可以從ajaxStart中隱藏這兩個類，而不必關心顯示哪一個。謝謝！ – ESDictor 2013-02-21 15:40:29

檢查我的更新。 – 2013-02-21 15:40:57

我更新了原來的問題以添加我使用的解決方案 – ESDictor 2013-02-21 15:59:12

如何根據不同的ajax調用顯示不同的preloader gif？

回答

相關問題