A Play Button for GIFs to save resources

I added several GIFs to a note, but unfortunately, this has caused the note to lag. It appears that the note is unable to handle the GIFs effectively. It would be preferable if the GIFs were only activated when I scroll to them or click on them.

2 Likes

I agree, in my case I’ve many tutorial notes and these use short, but nevertheless resource intensive gifs, eating uselessly resources.

A solution would be to play gifs just once automatically and afterwards only by mouse hover.

Css snippets could do the job and pause/play gifs, but implementing such a feature in a snippet would not be trivial.

It’s not a stop & start button, but you could tuck videos/gifs in a folded callout if you have a bunch in a note:

> [!warning]- title...
> ![[my.gif]]

I just wrote my own snippet, will add it to my theme as well :blush:

This snippet works but i need to do further tests. Could you try it too and let me know me if performance improves on your system ?

/* pause gif */
.image-embed[src*=".gif"] img {
  width: 0;
  visibility: hidden;
}

.image-embed[src*=".gif"]::after {
  content: "GIF";
  font-size: 1.6em;
  color: gray;
  border: 3px dashed gray;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  width: 50px;
  height: 50px;
  border-radius: 6px;
}

.image-embed[src*=".gif"].is-loaded:hover img {
  width: 100%;
  visibility: visible;
}

.image-embed[src*=".gif"]:hover::after {
  display: none;
}