Annullamento di una singola richiesta di immagine nel browser HTML5

Question

sto caricando in modo dinamico (grandi) immagini per disegnare in una tela HTML5, qualcosa di simile:

var t = new Image(); 
t.onload = ... 
t.src = 'http://myurl'; 

Ma ogni tanto un po 'vorrebbe cancellare l'immagine richiesta completamente.

L'unico modo che mi è venuta è l'impostazione src-''. vale a dire

t.src = '' 

Questo funziona in molti browser, ma sembra che solo Firefox in realtà annulla la richiesta HTTP per l'immagine.

Ho testato questo con Fiddler2 disabilitando la cache e abilitazione "emulare velocità modem". Quindi eseguendo a fiddle to test canceling a image request. (mi piacerebbe sentire altre idee su come testarlo)

So che ci sono modi per cancellare tutte le richieste (as in this question), ma vorrei solo cancellarne una.

Qualsiasi idea su altri modi (in particolare sui browser mobili) per fare questo?

Answer 1

Questo è l'unico modo in cui sono riuscito a farlo funzionare in tutti i browser moderni (Chrome, Safari, Mobile-Safari, Firefox e IE9).

• Caricare un vuoto e nascosta iframe
• aggiungere un image tag alla body nel iframe
• quando i img.onload Completa, è possibile utilizzare tale elemento immagine dom disegnare ad una tela HTML5 con drawImage()
• se si desidera annullare il caricamento, immettere stop() su iframe's contentWindow (o execCommand("stop", false) su contentDocument in IE).
• dopo aver annullato il caricamento di un'immagine, è possibile riutilizzare l'iframe per caricare più immagini.

ho creato una classe per questo, e mettere il codice CoffeeScript (ed è compilato javascript) su github: Cancelable Html5 Image Loader

Se si vuole giocare con lui, ho anche creato una jsfiddle to test it out. Ricorda di avviare Fiddler2 (o qualcosa di simile) per vedere che la richiesta di rete effettiva viene effettivamente cancellata.

Answer 2

Puoi provare window.stop() per interrompere tutte le richieste, ma non quelle individuali. In IE, non è window.stop() è document.execCommand ("Stop", false).

Se hai altre cose in corso su richiesta-saggio, poi facendo questo potrebbe interferire con esso. (Seguirai una richiesta per le risorse che desideri ancora, ma è troppo simile a un duro lavoro).

---

Quindi, se si voleva fermare una singola richiesta per una grande immagine, che cosa si potrebbe fare è caricare l'immagine in un documento all'interno di un iframe nascosto. L'evento onload dell'IFRAME può essere utilizzato per caricare l'immagine nel documento principale, in base alla quale deve essere memorizzata nella cache (presumendo che le direttive di memorizzazione nella cache siano configurate per farlo).

Se l'immagine richiede troppo tempo, allora è possibile accedere contentWindow del IFRAME ed emettere un comando di arresto a quello.

È necessario disporre di tanti elementi IFRAME quante sono le immagini che possono essere richieste contemporaneamente.

Answer 3

Dubito che ci sia un modo cross-browser per farlo accadere senza hack. Un suggerimento è di creare una richiesta AJAX per uno script sul lato server che restituisce una versione codificata Base64 dell'immagine che è possibile impostare come attributo src. Quindi puoi annullare questa richiesta se decidi di annullare il caricamento dell'immagine. Questo potrebbe essere difficile se si desidera mostrare l'immagine progressivamente comunque.

Answer 4

Ho lo stesso problema e ho fatto alcuni test.

Ho effettuato alcuni test con gli iframes e ho avuto qualche successo. Testato su Firefox 3.6 e Chrome. Per i test ho utilizzato 9 immagini di 15Mb. Con img preloading ho ucciso più volte il mio firefox (sì, non molto memoty su questo computer), usando img l'azione "suspend" non impedisce il caricamento dell'immagine se la richiesta è iniziata, con iframe l'azione suspend interrompe davvero il download (come rimuovere l'iframe). Il prossimo passo sarà il test con XMLHttpRequests.Poiché questa versione del mio codice test utilizza il comportamento della cache del braowser dall'URL dell'immagine per impedire un secondo caricamento e questo funziona anche con le richieste Ajax. Ma forse con iframe potrei trovare un modo per recuperare direttamente i dati binari dall'immagine caricata in iframe (con limitazioni sugli stessi URL di dominio).

Questo è il mio codice di prova (veramente veloce su Chrome, può uccidere il tuo firefox con troppa immagini molto grandi):

// jQuery.imageload.shared.list contains an array of oversized images url 
jQuery.each(imglist,function(i,imgsrc) { 

    name = 'imageload-frame'; 
    id = name + "-" + i; 
    // with img it is not possible to suspend, the get is performed even after remove 
    //var loader = jQuery('<img />').attr('name', name).attr('id',id); 
    var loader = jQuery('<iframe />').attr('name', name).attr('id',id); 

    //no cache on GET query taken from jQuery core 
    // as we really want to download each image for these tests 
    var ts = +new Date; 
    // try replacing _= if it is there 
    var ret = imgsrc.replace(/(\?|&)_=.*?(&|$)/, "$1_=" + ts + "$2"); 
    // if nothing was replaced, add timestamp to the end 
    imgsrc = imgsrc + ((ret == imgsrc) ? (imgsrc.match(/\?/) ? "&" : "?") + "_=" + ts : ""); 

    loader.css('display', 'none').appendTo('body'); 
    loader.after(jQuery('<a>') 
      .text(' stop ') 
      .attr('href','#') 
      .click(function(){ 
       loader.remove(); 
       jQuery(this).text(' suspended '); 
      }) 
    ); 

    // start the load - preload 
    loader.attr('src',imgsrc); 

    // when preload is done we provide a way to get img in document 
    loader.load(function() { 
     jQuery(this).next("a:first") 
      .text(" retrieve ").unbind('click') 
      .click(function() { 
       var finalimg = jQuery('<img />'); 
       // browser cache should help us now 
       // but there's maybe a way to get it direclty from the iframe 
       finalimg.attr('src',loader[0].src); 
       finalimg.appendTo('body'); 
      }); 
    }); 
}); 

modificare e qui è fillde per provarlo: http://jsfiddle.net/wPr3x/