Arresto dell'animazione GIF a livello di programmazione

Question

Sto sviluppando un'applicazione Twitter che fa riferimento alle immagini direttamente da Twitter. Come posso evitare di riprodurre le gif animate?

L'utilizzo di window.stop() alla fine della pagina non funziona per me in Firefox.

C'è un migliore hack JavaScript? Preferibile questo dovrebbe funzionare per tutti i browser

Answer 1

Questa non è una soluzione cross browser ma ha funzionato in firefox e opera (non in ie8: - /). Preso from here

[].slice.apply(document.images).filter(is_gif_image).map(freeze_gif); 

function is_gif_image(i) { 
    return /^(?!data:).*\.gif/i.test(i.src); 
} 

function freeze_gif(i) { 
    var c = document.createElement('canvas'); 
    var w = c.width = i.width; 
    var h = c.height = i.height; 
    c.getContext('2d').drawImage(i, 0, 0, w, h); 
    try { 
     i.src = c.toDataURL("image/gif"); // if possible, retain all css aspects 
    } catch(e) { // cross-domain -- mimic original with all its tag attributes 
     for (var j = 0, a; a = i.attributes[j]; j++) 
      c.setAttribute(a.name, a.value); 
     i.parentNode.replaceChild(c, i); 
    } 
} 

Answer 2

Questo è un po 'un trucco, ma potresti provare a caricare la gif in un iframe e chiamare window.stop() dall'iframe (su se stesso) una volta che l'immagine è stata caricata. Ciò impedisce il resto della pagina di fermarsi.

Answer 3

Ispirato alla risposta di @Karussell ho scritto Gifffer. Dateci un'occhiata qui https://github.com/krasimir/gifffer

Aggiunge automaticamente il controllo stop/play sulla parte superiore della Gif.

Answer 4

Nel tentativo di migliorare la risposta di Karussell, questa versione dovrebbe essere cross-browser, blocca tutte le immagini comprese quelle che hanno una fine di file non corretta (ad esempio pagine di caricamento automatico dell'immagine), e non è in conflitto con la funzione dell'originale immagine, facendo clic sul pulsante destro del mouse come se fosse in movimento.

Farei rilevare l'animazione, ma è molto più intensivo che congelarli a prescindere.

function createElement(type, callback) { 
    var element = document.createElement(type); 

    callback(element); 

    return element; 
} 

function freezeGif(img) { 
    var width = img.width, 
    height = img.height, 
    canvas = createElement('canvas', function(clone) { 
     clone.width = width; 
     clone.height = height; 
    }), 
    attr, 
    i = 0; 

    var freeze = function() { 
     canvas.getContext('2d').drawImage(img, 0, 0, width, height); 

     for (i = 0; i < img.attributes.length; i++) { 
      attr = img.attributes[i]; 

      if (attr.name !== '"') { // test for invalid attributes 
       canvas.setAttribute(attr.name, attr.value); 
      } 
     } 

     canvas.style.position = 'absolute'; 

     img.parentNode.insertBefore(canvas, img); 
     img.style.opacity = 0; 
    }; 

    if (img.complete) { 
     freeze(); 
    } else { 
     img.addEventListener('load', freeze, true); 
    } 
} 

function freezeAllGifs() { 
    return new Array().slice.apply(document.images).map(freezeGif); 
} 

freezeAllGifs();