← Wszystkie przykłady

JavaScript Multimedia

Zatrzymaj animowane GIF-y

Zamraża animowane GIF-y, rysując ich pierwszą klatkę na statycznym obrazku i ograniczając rozpraszanie.

Kod do skopiowania

// Freeze animated GIFs by drawing their first frame onto a static canvas.
function freezeGifs() {
  document.querySelectorAll('img[src$=".gif" i]').forEach(function (img) {
    if (img.dataset.jzFrozen) return;
    if (!img.complete || !img.naturalWidth) {
      img.addEventListener('load', freezeGifs, { once: true });
      return;
    }
    try {
      var c = document.createElement('canvas');
      c.width = img.naturalWidth;
      c.height = img.naturalHeight;
      c.getContext('2d').drawImage(img, 0, 0);
      img.src = c.toDataURL('image/png');
      img.dataset.jzFrozen = '1';
    } catch (e) {}
  });
}
freezeGifs();

Jak użyć tego przykładu

  1. Skopiuj kod przyciskiem powyżej.
  2. Zainstaluj JustZix (2 minuty) i otwórz wtyczkę na docelowej stronie.
  3. Dodaj nową regułę dopasowaną do tej strony.
  4. Wklej kod w panelu JavaScript reguły i zapisz — uruchomi się przy każdym wejściu na stronę.

Oceń ten przykład

Brak ocen — oceń jako pierwszy.

Czy ten przykład działa?

Snippety są bezużyteczne, jeśli nie masz gdzie ich wkleić.

JustZix instalujesz w 2 minuty i odpalasz swój kod na każdej pasującej stronie. Bez konta, bez opłat.

Pobierz za darmo Zobacz zastosowania