In Prototypekan ik een “loading…” afbeelding tonen met deze code:
var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars,
onLoading: showLoad, onComplete: showResponse} );
function showLoad () {
...
}
In jQuerykan ik hiermee een serverpagina in een element laden:
$('#message').load('index.php?pg=ajaxFlashcard');
maar hoe bevestig ik een laadspinner aan dit commando zoals ik deed in Prototype?
Antwoord 1, autoriteit 100%
Er zijn een aantal manieren. Mijn voorkeur gaat uit naar het koppelen van een functie aan de ajaxStart/Stop-gebeurtenissen op het element zelf.
$('#loadingDiv')
.hide() // Hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
})
;
De ajaxStart/Stop-functies worden geactiveerd wanneer u Ajax-oproepen doet.
Update: vanaf jQuery 1.8 staat in de documentatie dat .ajaxStart/Stop
alleen aan document
mag worden toegevoegd. Dit zou het bovenstaande fragment veranderen in:
var $loading = $('#loadingDiv').hide();
$(document)
.ajaxStart(function () {
$loading.show();
})
.ajaxStop(function () {
$loading.hide();
});
Antwoord 2, autoriteit 28%
Voor jQuery gebruik ik
jQuery.ajaxSetup({
beforeSend: function() {
$('#loader').show();
},
complete: function(){
$('#loader').hide();
},
success: function() {}
});
Antwoord 3, autoriteit 7%
Je kunt gewoon de functie .ajax
van jQuery gebruiken en de optie beforeSend
gebruiken en een functie definiëren waarin je zoiets als een loader-div kunt laten zien en bij succes de optie kan die loader-div verbergen.
jQuery.ajax({
type: "POST",
url: 'YOU_URL_TO_WHICH_DATA_SEND',
data:'YOUR_DATA_TO_SEND',
beforeSend: function() {
$("#loaderDiv").show();
},
success: function(data) {
$("#loaderDiv").hide();
}
});
Je kunt elke Spinning Gif-afbeelding hebben. Hier is een website die een geweldige AJAX Loader Generator is volgens jouw kleurenschema: http://ajaxload.info/
Antwoord 4, autoriteit 3%
Je kunt de geanimeerde afbeelding vlak voor de AJAX-aanroep in de DOM invoegen en een inline-functie uitvoeren om deze te verwijderen…
$("#myDiv").html('<img src="images/spinner.gif" alt="Wait" />');
$('#message').load('index.php?pg=ajaxFlashcard', null, function() {
$("#myDiv").html('');
});
Dit zorgt ervoor dat uw animatie bij volgende verzoeken met hetzelfde frame begint (als dat van belang is). Houd er rekening mee dat oude versies van IE mogelijkproblemen kunnen hebben met de animatie.
Veel succes!
Antwoord 5, autoriteit 3%
Als je $.ajax()
gebruikt, kun je zoiets als dit gebruiken:
$.ajax({
url: "destination url",
success: sdialog,
error: edialog,
// shows the loader element before sending.
beforeSend: function() {
$("#imgSpinner1").show();
},
// hides the loader after completion of request, whether successfull or failor.
complete: function() {
$("#imgSpinner1").hide();
},
type: 'POST',
dataType: 'json'
});
Hoewel de instelling “beforeSend” heet, wordt vanaf jQuery 1.5 “beforeSend” aangeroepen het verzoektype.dwz de functie .show()
wordt aangeroepen als type: 'GET'
.
Antwoord 6, autoriteit 3%
$('#message').load('index.php?pg=ajaxFlashcard', null, showResponse);
showLoad();
function showResponse() {
hideLoad();
...
}
http://docs.jquery.com/Ajax/load#urldatacallback
Antwoord 7
Gebruik de laadplug-in: http://plugins.jquery.com/project/loading
$.loading.onAjax({img:'loading.gif'});
Antwoord 8
Variant: ik heb een pictogram met id=”logo” linksboven op de hoofdpagina; er wordt dan een spinner-gif bovenop gelegd (met transparantie) wanneer ajax werkt.
jQuery.ajaxSetup({
beforeSend: function() {
$('#logo').css('background', 'url(images/ajax-loader.gif) no-repeat')
},
complete: function(){
$('#logo').css('background', 'none')
},
success: function() {}
});
Antwoord 9
Ik heb uiteindelijk twee wijzigingen aangebracht in het oorspronkelijke antwoord.
- vanaf jQuery 1.8, AjaxStart en AjaxStop mogen alleen worden bevestigd aan
document
. Dit maakt het moeilijker om slechts een deel van de AJAX-verzoeken te filteren. Soo … - Overschakelen naar ajaxsend en Ajaxcomplete maakt het mogelijk om het huidige AJAX-verzoek te interspecteren voordat u de spinner laat zien.
Dit is de code na deze wijzigingen:
$(document)
.hide() // hide it initially
.ajaxSend(function(event, jqxhr, settings) {
if (settings.url !== "ajax/request.php") return;
$(".spinner").show();
})
.ajaxComplete(function(event, jqxhr, settings) {
if (settings.url !== "ajax/request.php") return;
$(".spinner").hide();
})
Antwoord 10
Ik wil ook bijdragen aan dit antwoord. Ik was op zoek naar iets vergelijkbaars in jQuery en dit wat ik uiteindelijk heb geëindigd.
Ik heb mijn loading spinner van http://ajaxload.info/ . Mijn oplossing is gebaseerd op dit eenvoudige antwoord op http://christierney.com / 2011 / 03/23 / Global-Ajax-loading-spinners / .
In principe zouden uw HTML-markup en CSS er als volgt uitzien:
<style>
#ajaxSpinnerImage {
display: none;
}
</style>
<div id="ajaxSpinnerContainer">
<img src="~/Content/ajax-loader.gif" id="ajaxSpinnerImage" title="working..." />
</div>
En dan is uw code voor jQuery er zoiets uitzien:
<script>
$(document).ready(function () {
$(document)
.ajaxStart(function () {
$("#ajaxSpinnerImage").show();
})
.ajaxStop(function () {
$("#ajaxSpinnerImage").hide();
});
var owmAPI = "http://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=YourAppID";
$.getJSON(owmAPI)
.done(function (data) {
alert(data.coord.lon);
})
.fail(function () {
alert('error');
});
});
</script>
Zo simpel is het 🙂
Antwoord 11
U kunt eenvoudig een loader-afbeelding toewijzen aan dezelfde tag waarop u later inhoud gaat laden met een Ajax-aanroep:
$("#message").html('<span>Loading...</span>');
$('#message').load('index.php?pg=ajaxFlashcard');
Je kunt de span-tag ook vervangen door een afbeeldingstag.
Antwoord 12
Je kunt niet alleen algemene standaardwaarden instellen voor ajax-evenementen, maar ook gedrag instellen voor specifieke elementen. Misschien is het voldoende om van klas te veranderen?
$('#myForm').ajaxSend( function() {
$(this).addClass('loading');
});
$('#myForm').ajaxComplete( function(){
$(this).removeClass('loading');
});
Voorbeeld CSS, om #myForm te verbergen met een spinner:
.loading {
display: block;
background: url(spinner.gif) no-repeat center middle;
width: 124px;
height: 124px;
margin: 0 auto;
}
/* Hide all the children of the 'loading' element */
.loading * {
display: none;
}
Antwoord 13
Merk op dat u asynchrone oproepen voor spinners moet gebruiken om te werken (althans dat is wat de mijne heeft veroorzaakt om pas na het AJAX-oproep te laten zien en vervolgens snel wegging omdat de oproep de spinner was voltooid en de spinner was voltooid).
$.ajax({
url: requestUrl,
data: data,
dataType: 'JSON',
processData: false,
type: requestMethod,
async: true, <<<<<<------ set async to true
accepts: 'application/json',
contentType: 'application/json',
success: function (restResponse) {
// something here
},
error: function (restResponse) {
// something here
}
});
Antwoord 14
$('#loading-image').html('<img src="/images/ajax-loader.gif"> Sending...');
$.ajax({
url: uri,
cache: false,
success: function(){
$('#loading-image').html('');
},
error: function(jqXHR, textStatus, errorThrown) {
var text = "Error has occured when submitting the job: "+jqXHR.status+ " Contact IT dept";
$('#loading-image').html('<span style="color:red">'+text +' </span>');
}
});
Antwoord 15
Ik heb het volgende gebruikt met JQuery UI-dialoogvenster. (Misschien werkt het met andere Ajax-callbacks?)
$('<div><img src="/i/loading.gif" id="loading" /></div>').load('/ajax.html').dialog({
height: 300,
width: 600,
title: 'Wait for it...'
});
Het bevat een geanimeerde laad-gif totdat de inhoud wordt vervangen wanneer de ajax-oproep is voltooid.
Antwoord 16
Dit is de beste manier voor mij:
jQuery:
$(document).ajaxStart(function() {
$(".loading").show();
});
$(document).ajaxStop(function() {
$(".loading").hide();
});
Koffie:
$(document).ajaxStart ->
$(".loading").show()
$(document).ajaxStop ->
$(".loading").hide()
Documenten: ajaxStart, ajaxStop
Antwoord 17
JavaScript
$.listen('click', '#captcha', function() {
$('#captcha-block').html('<div id="loading" style="width: 70px; height: 40px; display: inline-block;" />');
$.get("/captcha/new", null, function(data) {
$('#captcha-block').html(data);
});
return false;
});
CSS
#loading { background: url(/image/loading.gif) no-repeat center; }
Antwoord 18
Dit is een heel eenvoudige en slimme plug-in voor dat specifieke doel:
https://github.com/hekigan/is-loading
Antwoord 19
Ik doe dit:
var preloaderdiv = '<div class="thumbs_preloader">Loading...</div>';
$('#detail_thumbnails').html(preloaderdiv);
$.ajax({
async:true,
url:'./Ajaxification/getRandomUser?top='+ $(sender).css('top') +'&lef='+ $(sender).css('left'),
success:function(data){
$('#detail_thumbnails').html(data);
}
});
Antwoord 20
Ik denk dat je gelijk hebt.
Deze methode is te globaal …
Maar – het is een goede standaard voor wanneer uw AJAX-oproep geen effect heeft op de pagina zelf. (bijvoorbeeld achtergrond opslaan). (U kunt het altijd uitschakelen voor een bepaalde AJAX-oproep door “Global” te passeren: FALSE – zie documentatie op jQuery
Wanneer het AJAX-oproep bedoeld is om een deel van de pagina te vernieuwen, houd ik van mijn “loading” -afbeeldingen om specifiek te zijn voor het vernieuwde sectie. Ik zou graag zien welk deel is vernieuwd.
Stel je voor hoe cool het zou zijn als je eenvoudig iets zou kunnen schrijven als:
$("#component_to_refresh").ajax( { ... } );
En dit zou een “laden” in dit gedeelte laten zien.
Hieronder is een functie die ik heb geschreven die ook “loading” -display schreef, maar het is specifiek voor het gebied dat u in Ajax verfrissen.
Laat me eerst laten zien hoe je het gebruikt
<!-- assume you have this HTML and you would like to refresh
it / load the content with ajax -->
<span id="email" name="name" class="ajax-loading">
</span>
<!-- then you have the following javascript -->
$(document).ready(function(){
$("#email").ajax({'url':"/my/url", load:true, global:false});
})
En dit is de functie – een basisstart dat u kunt verbeteren zoals u wilt. Het is erg flexibel.
jQuery.fn.ajax = function(options)
{
var $this = $(this);
debugger;
function invokeFunc(func, arguments)
{
if ( typeof(func) == "function")
{
func( arguments ) ;
}
}
function _think( obj, think )
{
if ( think )
{
obj.html('<div class="loading" style="background: url(/public/images/loading_1.gif) no-repeat; display:inline-block; width:70px; height:30px; padding-left:25px;"> Loading ... </div>');
}
else
{
obj.find(".loading").hide();
}
}
function makeMeThink( think )
{
if ( $this.is(".ajax-loading") )
{
_think($this,think);
}
else
{
_think($this, think);
}
}
options = $.extend({}, options); // make options not null - ridiculous, but still.
// read more about ajax events
var newoptions = $.extend({
beforeSend: function()
{
invokeFunc(options.beforeSend, null);
makeMeThink(true);
},
complete: function()
{
invokeFunc(options.complete);
makeMeThink(false);
},
success:function(result)
{
invokeFunc(options.success);
if ( options.load )
{
$this.html(result);
}
}
}, options);
$.ajax(newoptions);
};
Antwoord 21
Als u uw eigen code niet wilt schrijven, zijn er ook veel plug-ins die precies dat doen:
Antwoord 22
Als u van plan bent om elke keer een lader te gebruiken, kunt u het volgende patroon gebruiken.
jTarget.ajaxloader(); // (re)start the loader
$.post('/libs/jajaxloader/demo/service/service.php', function (content) {
jTarget.append(content); // or do something with the content
})
.always(function () {
jTarget.ajaxloader("stop");
});
Deze code gebruikt in het bijzonder de JAJAXLoader-plug-in (die ik zojuist heeft gemaakt)
https://github.com/lingtalfi/jajaxLoader/
Antwoord 23
Mijn Ajax-code ziet er zo uit als dit, in feite, ik heb zojuist async geformuleerd: valse lijn en de spinner verschijnt.
$.ajax({
url: "@Url.Action("MyJsonAction", "Home")",
type: "POST",
dataType: "json",
data: {parameter:variable},
//async: false,
error: function () {
},
success: function (data) {
if (Object.keys(data).length > 0) {
//use data
}
$('#ajaxspinner').hide();
}
});
Ik laat de spinner in een functie zien vóór de AJAX-code:
$("#MyDropDownID").change(function () {
$('#ajaxspinner').show();
Voor HTML heb ik een Font Awesome-klasse gebruikt:
<i id="ajaxspinner" class="fas fa-spinner fa-spin fa-3x fa-fw" style="display:none"></i>
Ik hoop dat het iemand helpt.
Antwoord 24
Je kunt altijd de Block UI jQuery plugingebruiken die alles voor je doet, en het blokkeert zelfs de pagina van elke invoer terwijl de ajax wordt geladen. In het geval dat de plug-in niet lijkt te werken, kun je lezen over de juiste manier om deze te gebruiken in dit antwoord .Bekijk het.