javascript gif




Fermare l'animazione GIF a livello di programmazione (3)

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


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

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


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'immagine originale, consentendo l'originale deve essere fatto clic destro 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();

Questo è un po 'un trucco, ma puoi 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.





animated-gif