Artikel-Hilfsmenü
Montag, 9. Dezember 2019 – aktualisiert am Montag, 22. Februar 2021
Ein Bookmarklet um Animated GIFs zu stoppen
Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.
Installieren des Bookmarklets
Den Button in die Lesezeichenleiste ziehen: Pause GIF
{[].slice.apply(document.images).filter(function(a){return%20/^(%3F!data:).*\.gif/i.test(a.src)}).map(function(b){var%20d=document.createElement(%22canvas%22),c=d.width=b.width,e=d.height=b.height;d.getContext(%222d%22).drawImage(b,0,0,c,e);try{b.src=d.toDataURL(%22image/gif%22)}catch(a){for(var%20f,g=0;f=b.attributes[g];g++)d.setAttribute(f.name,f.value);b.parentNode.replaceChild(d,b)}})}();){kind=link}
Anwendung:
Einfach das Bookmarklet aufrufen, und schon ist Ruhe. 
Erstellung des Bookmarklets
Das folgende JavaScript bewirkt beim Aufruf, dass Animated GIFs durch statische Bilder ersetzt werden:
[].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);
}
}
Damit dieses JavaScript-Snippet als Bookmarklet funktioniert, muss der Code "bereinigt" werden.
chriszarate.github.io/bookmarkleter macht das automatisch.
Das Ergebnis:
javascript:void%20function(){[].slice.apply(document.images).filter(function(a){return%20/^(%3F!data:).*\.gif/i.test(a.src)}).map(function(b){var%20d=document.createElement(%22canvas%22),c=d.width=b.width,e=d.height=b.height;d.getContext(%222d%22).drawImage(b,0,0,c,e);try{b.src=d.toDataURL(%22image/gif%22)}catch(a){for(var%20f,g=0;f=b.attributes[g];g++)d.setAttribute(f.name,f.value);b.parentNode.replaceChild(d,b)}})}();
Nachtrag
Sogar auf iPhone oder iPad lassen sich Bookmarklets installieren. Hier eine gute Beschreibung [englisch]
Nachtrag 17.02.2021
Mit der Chrome Erweiterung Shortkeys (Custom Keyboard Shortcuts), oder mit dem entsprechenden Firefox-Add-On das Bookmarklet auf die esc-Taste gelegt, und jetzt habe ich wieder das alte Firefox-Verhalten. :-)
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
Kommentare
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.