Actualmente, estoy creando un sistema para mostrar imágenes aleatorias cada 0,5 segundos. Tengo casi 40k fotos +-
Pero tengo problemas para cargar estas imágenes usando Javascript.
1 - Si los cargo demasiado rápido, a veces me "cancelan" como respuesta en la consola. ( https://prnt.sc/1t23k2o )
2: si verifico si la imagen se cargó correctamente para cargar la siguiente imagen, obtengo un retraso y esto da como resultado un cuello de botella que muestra imágenes cada 0,5 segundos. (en carga)
(function getImages(i) { setTimeout(function() { v++; var r = Math.random(); img.src = "seg/out-" + v + ".jpg?v=" + r; if (--i) getImages(i); }, 500) })(300); // trigger this function 300x¿Cómo manejo esto? ¿Podría ayudarme a mejorar mi lógica? Gracias.
Puede intentar precargar una imagen al final del tiempo de espera anterior, así:
function preLoadImage(src) { const preloader = new Image(); preloader.src = src; } function setImage(src) { img.src = src; } (function getImages(i, currentSrc) { setTimeout(function() { v++; setImage(currentSrc); const r = Math.random(); const nextSrc = "seg/out-" + v + ".jpg?v=" + r; preLoadImage(nextSrc); if (--i) getImages(i, nextSrc); }, 500) })(300);Déjame saber si te funciona o no.