Come cancellare un jquery.load ()?

Vorrei annullare un’operazione .load (), quando load () non ritorna in 5 secondi. Se è così, mostro un messaggio di errore come “scusa, nessuna immagine caricata”.

Quello che ho è …

… la gestione del timeout:

jQuery.fn.idle = function(time, postFunction){ var i = $(this); i.queue(function(){ setTimeout(function(){ i.dequeue(); postFunction(); }, time); }); return $(this); }; 

… inizializzazione del timeout del messaggio di errore:

 var hasImage = false; $('#errorMessage') .idle(5000, function() { if(!hasImage) { // 1. cancel .load() // 2. show error message } }); 

… il caricamento dell’immagine:

 $('#myImage') .attr('src', '/url/anypath/image.png') .load(function(){ hasImage = true; // do something... }); 

L’unica cosa che non riuscivo a capire è come annullare il carico in esecuzione () (se ansible).

Modificare:

Un altro modo: come impedire al metodo .load () di richiamare la funzione di callback al suo ritorno?

Se si desidera una gestione personalizzata come questa, semplicemente non è ansible utilizzare la funzione jQuery.load (). Dovrai eseguire l’upgrade a jQuery.ajax (), che consiglio comunque poiché puoi fare molto di più con esso, specialmente se hai bisogno di un qualsiasi tipo di gestione degli errori, sarà necessario.

Utilizzare l’opzione beforeSend per jQuery.ajax e acquisire lo xhr. Quindi è ansible creare una richiamata che può annullare l’xhr dopo il timeout e le richiamate secondo necessità.

Questo codice non è testato, ma dovrebbe iniziare.

 var enableCallbacks = true; var timeout = null; jQuery.ajax({ https://stackoverflow.com/questions/2813168/how-to-cancel-a-jquery-load/.... beforeSend: function(xhr) { timeout = setTimeout(function() { xhr.abort(); enableCallbacks = false; // Handle the timeout https://stackoverflow.com/questions/2813168/how-to-cancel-a-jquery-load/... }, 5000); }, error: function(xhr, textStatus, errorThrown) { clearTimeout(timeout); if (!enableCallbacks) return; // Handle other (non-timeout) errors }, success: function(data, textStatus) { clearTimeout(timeout); if (!enableCallbacks) return; // Handle the result https://stackoverflow.com/questions/2813168/how-to-cancel-a-jquery-load/... } }); 

La tua domanda secondaria riformulata:
Come annullare le funzioni di callback in sospeso, create utilizzando il metodo .load ()?

Puoi cancellare tutte le callback jquery, usando questa opzione ‘nucleare’:

 $('#myImage').unbind('load'); 

Penso che la cosa più semplice da fare sarebbe usare $.ajax direttamente. In questo modo è ansible avviare un timeout e dal timeout impostare un flag che il gestore della chiamata ajax può controllare. Il timeout può anche mostrare un messaggio o qualsiasi altra cosa.

Se si carica questo codice dopo aver caricato JQuery, sarà ansible chiamare .load () con un parametro di timeout.

 jQuery.fn.load = function( url, params, callback, timeout ) { if ( typeof url !== "string" ) { return _load.call( this, url ); // Don't do a request if no elements are being requested } else if ( !this.length ) { return this; } var off = url.indexOf(" "); if ( off >= 0 ) { var selector = url.slice(off, url.length); url = url.slice(0, off); } // Default to a GET request var type = "GET"; // If the second parameter was provided if ( params ) { // If it's a function if ( jQuery.isFunction( params ) ) { if( callback && typeof callback === "number"){ timeout = callback; callback = params; params = null; }else{ // We assume that it's the callback callback = params; params = null; timeout = 0; } // Otherwise, build a param string } else if( typeof params === "number"){ timeout = params; callback = null; params = null; }else if ( typeof params === "object" ) { params = jQuery.param( params, jQuery.ajaxSettings.traditional ); type = "POST"; if( callback && typeof callback === "number"){ timeout = callback; callback = null; }else if(! timeout){ timeout = 0; } } } var self = this; // Request the remote document jQuery.ajax({ url: url, type: type, dataType: "html", data: params, timeout: timeout, complete: function( res, status ) { // If successful, inject the HTML into all the matched elements if ( status === "success" || status === "notmodified" ) { // See if a selector was specified self.html( selector ? // Create a dummy div to hold the results jQuery("
") // inject the contents of the document in, removing the scripts // to avoid any 'Permission Denied' errors in IE .append(res.responseText.replace(rscript, "")) // Locate the specified elements .find(selector) : // If not, just inject the full result res.responseText ); } if ( callback ) { self.each( callback, [res.responseText, status, res] ); } } }); return this; };

Non sei sicuro se sei interessato a sovrascrivere le funzioni JQuery “standard”, ma questo ti permetterebbe di usare .load () come hai descritto.

Non penso che tu possa arrivarci da qui – come menzionato @Pointy, devi avere bisogno di arrivare all’object .abort() modo da poter accedere al metodo .abort() . Per questo, è necessario l’API jQuery .ajax() che restituisce l’object.

Escludendo la possibilità di annullare la richiesta, un altro metodo da considerare è quello di aggiungere la conoscenza del timeout alla funzione di callback. Potresti fare questo in due modi: primo:

 var hasImage = false; $('#errorMessage') .idle(5000, function() { if(!hasImage) { // 1. cancel .load() // 2. show error message // 3. Add an aborted flag onto the element(s) $('#myImage').data("aborted", true); } }); 

E la tua richiamata:

 $('#myImage') .attr('src', '/url/anypath/image.png') .load(function(){ if($(this).data("aborted")){ $(this).removeData("aborted"); return; } hasImage = true; // do somethinghttps://stackoverflow.com/questions/2813168/how-to-cancel-a-jquery-load/... }); 

Oppure puoi ignorare l’inattività per questa particolare funzionalità:

 $('#myImage') .attr('src', '/url/anypath/image.png') .data("start", (new Date()).getTime()) .load(function(){ var start = $(this).data("start"); $(this).removeData("start"); if(((new Date()).getTime() - start) > 5000) return; hasImage = true; // do somethinghttps://stackoverflow.com/questions/2813168/how-to-cancel-a-jquery-load/... }); 

Nessuno dei due approcci è l’ideale, ma non penso che si possa annullare direttamente il carico a partire da jQuery 1.4 – potrebbe essere una bella richiesta di funzionalità al team di jQuery, però.

$('#myImage').load(function(){https://stackoverflow.com/questions/2813168/how-to-cancel-a-jquery-load/...}) non è una chiamata di funzione per caricare l’immagine, in realtà è una scorciatoia per associare un callback all’evento onload .

Pertanto, l’aggiunta di un parametro di timeout al metodo .load() come suggerito in altre risposte non avrà alcun effetto.

Pensa che le tue due opzioni siano:

  1. Continua sul percorso che stai seguendo e fai qualcosa come $('#myImage').attr('src', ''); per annullare il caricamento dell’immagine dopo il timeout o

  2. Trova un modo per usare $.ajax( { https://stackoverflow.com/questions/2813168/how-to-cancel-a-jquery-load/... , timeout: 5000, https://stackoverflow.com/questions/2813168/how-to-cancel-a-jquery-load/...} ); per caricare l’immagine invece di lasciare che il browser lo faccia automaticamente tramite l’attributo .

Potresti semplicemente impostare un timeout prima di caricare l’immagine e testare un errore di caricamento.

 function LoadImage(yourImage) { var imageTimer = setTimeout(function () { //image could not be loaded: alert('image load timed out'); }, 10000); //10 seconds $(yourImage).load(function (response, status, xhr) { if (imageTimer) { if (status == 'error') { //image could not be loaded: alert('failed to load image'); } else { //image was loaded: clearTimeout(imageTimer); //display your imagehttps://stackoverflow.com/questions/2813168/how-to-cancel-a-jquery-load/... } } }); }