← All examples

JavaScript Media

Pause animated GIFs

Freezes animated GIFs by rendering their first frame as a static image to reduce distraction.

Code to copy

// 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();

How to use this example

  1. Copy the code with the button above.
  2. Install JustZix (2 minutes) and open the extension on the target page.
  3. Add a new rule matching that page.
  4. Paste the code into the rule's JavaScript panel and save — it runs on every page visit.

Rate this example

No ratings yet — be the first.

Does this example work?

Snippets are useless without somewhere to paste them.

JustZix takes 2 minutes to install and runs your code on every matching page. No account, no payment.

Download free See use cases