Comment annuler un jquery.load ()?

Si vous souhaitez une telle gestion personnalisée, vous ne pouvez tout simplement pas utiliser la fonction jQuery.load (). Vous devrez passer à jQuery.ajax (), ce que je recommande quand même, car vous pouvez faire beaucoup plus avec cela, surtout si vous avez besoin de n’importe quel type de gestion des erreurs, ce sera nécessaire.

Utilisez l’option beforeSend pour jQuery.ajax et capturez le xhr. Ensuite, vous pouvez créer un rappel qui peut annuler le xhr après votre délai d’attente et les rappels, si nécessaire.

Ce code n’est pas testé, mais devrait vous aider à démarrer.

 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/... } }); 

Votre question secondaire reformulée:
Comment annuler les fonctions de rappel en attente créées à l’aide de la méthode .load ()?

Vous pouvez annuler tous les callbacks jquery en utilisant cette option ‘nucléaire’:

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

Je pense que la chose la plus simple à faire serait d’utiliser directement $.ajax . De cette façon, vous pouvez démarrer un délai d’expiration et définir à partir de ce délai un indicateur que le gestionnaire de l’appel ajax peut vérifier. La temporisation peut également afficher un message ou autre.

Si vous chargez ce code après le chargement de JQuery, vous pourrez appeler .load () avec un paramètre de délai d’attente.

 jQuery.fn.load = function( url, params, callback, timeout ) { if ( typeof url !== "ssortingng" ) { 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 ssortingng } 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; }; 

Vous n’êtes pas sûr de vouloir écraser des fonctions JQuery “standard”, mais cela vous permettrait d’utiliser .load () comme vous l’avez décrit.

Je ne pense pas que vous puissiez y arriver à partir d’ici – comme l’a mentionné @Pointy, vous devez accéder à l’object XmlHttpRequest pour pouvoir accéder à la méthode .abort() . Pour cela, vous avez besoin de l’API jQuery .ajax() qui vous renvoie l’object.

Sauf possibilité d’abandonner la demande, une autre méthode à prendre en compte consiste à append des informations sur le délai d’attente dans la fonction de rappel. Vous pouvez le faire de deux manières – premièrement:

 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); } }); 

Et votre rappel:

 $('#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/... }); 

Ou vous pouvez ignorer le ralenti pour cette fonctionnalité particulière:

 $('#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/... }); 

Aucune approche n’est idéale, mais je ne pense pas que vous puissiez annuler directement le chargement à partir de jQuery 1.4 – cela pourrait être une demande de fonctionnalité intéressante pour l’équipe jQuery, cependant.

$('#myImage').load(function(){https://stackoverflow.com/questions/2813168/how-to-cancel-a-jquery-load/...}) n’est pas un appel de fonction pour charger l’image, il s’agit en réalité d’un raccourci pour lier un rappel à l’ événement onload .

Par conséquent, l’ajout d’un paramètre de timeout à la méthode .load() comme suggéré dans d’autres réponses n’aura aucun effet.

Je pense que vos deux options sont:

1. Continuez sur le chemin que vous suivez et faites quelque chose comme $('#myImage').attr('src', ''); pour annuler le chargement de l’image après son expiration, ou

2. Trouvez un moyen d’utiliser $.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/...} ); charger l’image au lieu de laisser le navigateur le faire automatiquement via l’atsortingbut .

Vous pouvez simplement définir un délai d’attente avant de charger l’image, ainsi que de tester une erreur de chargement.

 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/... } } }); }