Ich entwickle eine Twitter-Anwendung, die direkt von Twitter auf die Bilder verweist. Wie kann ich verhindern, dass animierte Gifs abgespielt werden?
Die Verwendung window.stop()
am Ende der Seite funktioniert in Firefox bei mir nicht.
Gibt es einen besseren JavaScript-Hack? Dies sollte vorzugsweise für alle Browser funktionieren
javascript
html
animated-gif
Karussell
quelle
quelle
Antworten:
Inspiriert von der Antwort von @Karussell schrieb ich Gifffer. Überprüfen Sie es hier https://github.com/krasimir/gifffer
Es fügt automatisch eine Stop / Play-Steuerung über Ihrem Gif hinzu.
quelle
Dies ist keine browserübergreifende Lösung, aber dies funktionierte in Firefox und Oper (nicht in IE8: - /). Von hier genommen
[].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); } }
quelle
.drawImage
dies nicht mit einem Fehler fehlschlägt, liegt kein CORS-Problem vor und dercatch
Zweig wird nicht ausgeführt. Wenn jedoch ein CORS-Problem vorliegt, wird das Skript beendet und das Ganzetry/catch
wird nicht erreicht. Habe ich recht?stop
Funktion, die Sie aufrufen können, um die Animation zu stoppen.In einem Versuch, Karussells Antwort zu verbessern, sollte diese Version browserübergreifend sein, alle Bilder einfrieren, einschließlich solcher, deren Dateiende falsch ist (z. B. Seiten zum automatischen Laden von Bildern), und nicht mit der Funktion des Originalbilds in Konflikt stehen Original, um mit der rechten Maustaste geklickt zu werden, als würde es sich bewegen.
Ich würde dafür sorgen, dass Animationen erkannt werden, aber das ist viel intensiver, als sie trotzdem einzufrieren.
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();
quelle
Dies ist ein kleiner Hack, aber Sie können versuchen, das GIF in einen Iframe zu laden und
window.stop()
aus dem Iframe (auf sich selbst) heraus aufzurufen, sobald das Bild geladen wurde. Dies verhindert, dass der Rest der Seite angehalten wird.quelle