Traté de mostrar gif solo una vez. Así que usé este código para lograr esto.
var ui_img = document.getElementById("ui_image"); ui_img.hidden = false; setTimeout(function () { ui_img.hidden = true; }, 8000);Pero sabía que todos los gifs no tienen la misma duración. ¿Como puedo resolver esto?
Podría intentar usar esta biblioteca gifruct-js .
Utilice principalmente parseGIF() , luego decompressFrames() para obtener una matriz de fotogramas, cada uno con la propiedad delay : la cantidad de tiempo que se muestra el fotograma. Por lo tanto, podría sumar todos los retrasos de fotogramas para obtener la duración total de una imagen GIF.
Ejemplo de uso: ejemplo de código modificado de su página de Github:
import { parseGIF, decompressFrames } from 'gifuct-js' var oReq = new XMLHttpRequest(); oReq.open("GET", gifURL, true); oReq.responseType = "arraybuffer"; oReq.onload = function (oEvent) { var arrayBuffer = oReq.response; // Note: not oReq.responseText if (arrayBuffer) { var gif = parseGIF(arrayBuffer); var frames = decompressFrames(gif, true); // do something with the frame data // get total time in ms var totalTime = frames .map(frame => frame.delay) .reduce((a, b) => a + b); } }; oReq.send(null);