L'arrêt de GIF Animation par programmation

Je développe une application Twitter qui des références à des images directement à partir de Twitter.
Comment puis-je empêcher les gifs animés d'être joué?

À l'aide de window.stop() à la fin de la page ne fonctionne pas pour moi dans Firefox.

Est-il un meilleur JavaScript hack? Préférable cela devrait fonctionner pour tous les navigateurs

  • Si vous avez de côté de serveur de langues à votre disposition, je pense que vous feriez mieux d'utiliser côté serveur de code pour prendre la première image, de le stocker sur votre serveur et de l'afficher à la place..
  • Le problème, c'est qu'il y a de 15 à 60 images à partir de twitter pour changer. Voir jetwick.com (open source).
  • ouais, mais vous seul changement une fois de sorte qu'il ne devrait pas être un problème.
InformationsquelleAutor Karussell | 2010-09-10
  1. 54

    Inspiré par la réponse de @Karussell j'ai écrit Gifffer. Check it out ici https://github.com/krasimir/gifffer

    Il ajoute automatiquement arrêt/contrôle de lecture sur le dessus de votre Gif.

    • Souhaite que je pourrais +de 5 ce.
    • Souhaite que je pourrais +5 le précédent commentaire ici... 🙂 C'est un peu grand (mais très intelligent) morceau de code pour la gestion des GIFs animés comme ça. Merci
    • Je réalise que j'ai 3 1/2 ans. Je n'aime pas, cela ne signifie pas que ce n'est pas encore en suspens. Branché sur une page aujourd'hui, fonctionne à merveille.
    InformationsquelleAutor Krasimir
  2. 47

    Ce n'est pas un navigateur croix une solution, mais cela a fonctionné dans firefox et opera (pas dans ie8 :-/). Pris à partir d'ici

    [].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);
    }
}
    • C'est à l'aide de HTML5 donc autant que je peux voir, il devrait fonctionner sur n'importe quel navigateur supportant le HTML5. Selon ceci: deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72 IE ne fonctionne toujours pas.
    • merci de souligner ce point
    • I pense cela ne pouvait fonctionner que sur locaux les gifs animés en opposition à ceux qui sont hébergés sur un autre domaine
    • Bibliothèque sur la base de cette réponse
    • Il ya quelque chose de mal avec le script, n'est-ce pas? Si .drawImage ne pas échouer avec une erreur, il n'y a pas de problème de la SCRO et catch branche ne sera pas exécuté. Si, toutefois, il est de la SCRO problème, le script se termine et tout try/catch n'est pas atteint. Suis-je le droit?
    • Si je me souviens bien, dans IE8 gif éléments ont un stop fonction, vous pouvez appeler pour arrêter l'animation.
    • D'une part, c'est une solution à partir de 2010. D'autre part, cela a fonctionné pour moi bien sur Chrome (Windows 7). Le fait que je mentionne également l'OS, c'est que curieusement, il ne fonctionne pas sur Chrome sur Linux, pour une raison quelconque. Sur mon google Chrome, modifie le "src" de tous les fichiers GIF en binaire (src="data:..."). Sur Linux, Chrome il a tout changé pour "toile", et les images n'étaient pas affichés correctement sur la page. Quelqu'un sait-il pourquoi?
    • Il fonctionne pour moi sous Ubuntu Chrome

    InformationsquelleAutor Karussell
  3. 8

    Dans une tentative pour améliorer Karussell réponse, cette version devrait être la croix-navigateur, vous pouvez bloquer toutes les images, y compris ceux qui ont un fichier incorrect de fin (par exemple d'image automatisé de chargement des pages), et n'entre pas en conflit avec la fonction de l'image d'origine, permettant à l'origine pour être cliqué avec le bouton droit, comme si elle était en mouvement.

    Je voudrais faire détecter l'animation, mais qui est beaucoup plus intensive que juste de congélation, quel que soit le.

    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();
    InformationsquelleAutor Makaze
  4. 3

    C'est un peu un hack, mais vous pouvez essayer de charger le gif dans une iframe et l'appel window.stop() de l'intérieur de l'iframe (sur lui-même) une fois l'image chargée. Cela empêche le reste de la page à partir de l'arrêt.

    • sera-ce de ralentir le rendu de la page?
    • je ne crois pas, non. l'essayer!
    • Pourriez-vous me donner un exemple de code. Je ne pouvais pas le faire fonctionner avec votre méthode + voir la mise à jour
    • l'appel de la fenêtre.stop() de l'intérieur de l'iframe s'arrête également la fenêtre d'origine d'être exécuté ou comment vous faire exactement?
    InformationsquelleAutor Jason