¿Hay alguna manera de mostrar la cantidad de veces que se repite un gif animado? Por ejemplo, aterriza en una página con un gif animado y cuando ese gif recorre completamente su animación una vez, se muestra un 1. Ese número aumenta en 1 cada vez que el gif se repite por completo. Siempre.
¡Gracias por cualquier idea!
Calculo el tiempo de duración del gif y luego establezco Intervalo. Mi gif dura 15 segundos.
const gif = document.getElementById("gif"); gifLoopCounterInit(gif.src); function gifLoopCounterInit(fileSrc) { var request = new XMLHttpRequest(); request.open('GET', fileSrc, true); request.responseType = 'arraybuffer'; request.addEventListener('load', async function () { calcDurationGif(request.response).then(function (duration) { const loopCounter = document.getElementById("loop-counter"); setInterval(function () { loopCounter.innerHTML++; }, duration * 1000); }); }); request.send(); } function calcDurationGif(file) { return new Promise((resolve, reject) => { try { let arr = new Uint8Array(file); let duration = 0; for (var i = 0; i < arr.length; i++) { if (arr[i] == 0x21 && arr[i + 1] == 0xF9 && arr[i + 2] == 0x04 && arr[i + 7] == 0x00) { const delay = (arr[i + 5] << 8) | (arr[i + 4] & 0xFF) duration += delay < 2 ? 10 : delay; } } console.log(duration / 100); resolve(duration / 100); } catch (e) { reject(e); } }); } <img id="gif" src="https://c.tenor.com/AeFQKHQFFq8AAAAd/gif-art.gif" alt=""> <p>Loops : <span id="loop-counter">0</span> </p>