eliminar - remove data id jquery

¿Cómo cancelar un jquery.load()?

Question

Me gustaría cancelar una operación .load (), cuando la carga () no vuelve en 5 segundos. Si es así, muestro un mensaje de error como "lo siento, no hay imagen cargada".

Lo que tengo es ...

... el tiempo de espera de manejo:

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

... inicializando el tiempo de espera del mensaje de error:

var hasImage = false;

$(''#errorMessage'')
    .idle(5000, function() {

        if(!hasImage) {
            // 1. cancel .load()            
            // 2. show error message
        }
    });

... la imagen cargando:

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

Lo único que no pude averiguar es cómo cancelar la carga en ejecución () (si es posible).

Editar:

Otra forma: ¿Cómo evito que el método .load () llame a su función de devolución de llamada cuando está regresando?

Answer 1

Creo que lo más simple sería usar $.ajax directamente. De esa manera, puede iniciar un tiempo de espera y, a partir del tiempo de espera, establecer una marca que el controlador de la llamada ajax pueda verificar. El tiempo de espera también puede mostrar un mensaje o lo que sea.

Answer 2

No creo que puedas llegar allí desde aquí, como lo mencionó @Pointy, necesitas tener que llegar al objeto XmlHttpRequest para poder acceder al método .abort() . Para eso, necesita la API jQuery .ajax() que le devuelve el objeto.

Salvo la posibilidad de abortar la solicitud, otro método a considerar es agregar el conocimiento del tiempo de espera en la función de devolución de llamada. Puedes hacer esto de dos maneras: primero:

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

Y su devolución de llamada:

$(''#myImage'')
     .attr(''src'', ''/url/anypath/image.png'')
     .load(function(){
         if($(this).data("aborted")){
             $(this).removeData("aborted");
             return;
         }
         hasImage = true;
         // do something...
      });

O puede omitir el inactivo para esta funcionalidad particular:

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

Ninguno de los dos enfoques es ideal, pero no creo que pueda cancelar directamente la carga a partir de jQuery 1.4, aunque podría ser una buena solicitud de características para el equipo de jQuery.

Answer 3

Si carga este código después de que se haya cargado JQuery, podrá llamar a .load () con un parámetro de tiempo de espera.

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("<div />")
                        // 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;
};

No estoy seguro si está interesado en sobrescribir cualquier función JQuery "estándar", pero esto le permitiría usar .load () de la manera que describió.

Answer 4

Si desea un manejo personalizado como este, simplemente no puede usar la función jQuery.load (). Tendrá que actualizar a jQuery.ajax (), lo cual recomiendo de todos modos ya que puede hacer mucho más con él, especialmente si necesita algún tipo de manejo de errores, será necesario.

Use la opción beforeSend para jQuery.ajax y capture el xhr. Luego puede crear una devolución de llamada que puede cancelar el xhr después de su tiempo de espera y las devoluciones de llamada según sea necesario.

Este código no se ha probado, pero debería comenzar.

var enableCallbacks = true;
var timeout = null;
jQuery.ajax({
  ....
  beforeSend: function(xhr) {
    timeout = setTimeout(function() {
      xhr.abort();
      enableCallbacks = false;
      // Handle the timeout
      ...
    }, 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
    ...
  }
});

Answer 5

Simplemente puede establecer un tiempo de espera antes de cargar la imagen, así como probar un error de carga.

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 image...
            }

        }
    });

}

Answer 6

Su pregunta secundaria reformulada:
¿Cómo cancelo las funciones de devolución de llamada pendientes, creadas usando el método .load ()?

Puede cancelar todas las devoluciones de llamada jquery, utilizando esta opción ''nuclear'':

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

Answer 7

$(''#myImage'').load(function(){...}) no es una llamada de función para cargar la imagen, en realidad es una abreviación para vincular una devolución de llamada al evento onload .

Por lo tanto, agregar un parámetro de timeout al método .load() como se sugiere en otras respuestas no tendrá efecto.

Piensa que tus dos opciones son:

1. Continúa en la ruta que estás siguiendo y haz algo como $(''#myImage'').attr(''src'', ''''); para cancelar la carga de la imagen después de que se agote, o

2. Encuentre alguna manera de usar $.ajax( { ... , timeout: 5000, ...} ); para cargar la imagen en lugar de dejar que el navegador lo haga automáticamente a través del atributo <img src="..."> .