add optimization for animation via viewport IntersectionObserver

render/base.css

@@ -241,6 +241,9 @@ body.min { /* split feature */
 	position: absolute;
 	animation: flash var(--animation-duration) infinite;
 }
+.block-gold.anim_off {
+	animation: none;
+}
 
 
 :root {

render/index.js

@@ -163,7 +163,9 @@ function buildData(table, images, data, sort) {
 	for (let block of images.querySelectorAll(".image-container")) {
 		block.addEventListener("click", function() {
 			let diffElement = this.querySelector(".block-diff");
+			let goldElement = this.querySelector(".block-gold");
 			diffElement.classList.toggle("show_diff");
+			goldElement.classList.toggle("anim_off");
 		});
 	};
 
@@ -197,6 +199,9 @@ const loadFromLocalStorage = (key) => {
 }
 
 
+
+
+
 window.onload = () => {
 	const linkElements = document.querySelectorAll('link[rel^="stylesheet"][data-theme]');
 	function updateLinkRel(linkElements, id) {
@@ -438,6 +443,26 @@ window.onload = () => {
 		gridContainer.classList.toggle("reversed");
 	}
 
+
+
+	// stop animation when not in viewport
+	function handleIntersection(entries, observer) {
+		for (let entry of entries) {
+			if (!entry.isIntersecting) {
+				entry.target.classList.add("anim_off");
+			} else {
+				entry.target.classList.remove("anim_off");
+			}
+		}
+	}
+	const observer = new IntersectionObserver(handleIntersection, {
+		root: null,
+		threshold: 0.1
+	});
+	for (let element of document.querySelectorAll(".block-gold")) {
+		observer.observe(element);
+	}
+
 }