no muy grande en JS. Actualmente tengo un script que uso para cargar/cambiar imágenes de fondo cada xxx segundos.
Lo que me gustaría es mostrar una imagen y precargar la siguiente para que se muestre sin problemas (es decir, sin fluctuaciones ni cargas lentas).
Aquí está mi guión actual, ¿se puede adaptar para lograr tal resultado?
<!-- Background Image Changer inpired by: https://stackoverflow.com/a/7265145 --> var images = ['images/image01.jpg', 'images/image02.jpg', 'images/image03.jpg', 'images/image04.jpg', 'images/image05.jpg', 'images/image06.jpg', 'images/image07.jpg', 'images/image08.jpg', 'images/image09.jpg', 'images/image10.jpg', 'images/image11.jpg', 'images/image12.jpg', 'images/image13.jpg', 'images/image14.jpg', 'images/image15.jpg', 'images/image16.jpg',]; var numSeconds = 30; var curImage = 0; function switchImage() { curImage = (curImage + 1) % images.length document.body.style.backgroundImage = 'url(' + images[curImage] + ')' } window.setInterval(switchImage, numSeconds * 1000);NOTAS: Hay 50 imágenes en mi guión. Solo he usado marcadores de posición con nombre falso para mayor claridad.
EDITAR: para ser claros, solo quiero que se muestre una imagen y que se precargue la siguiente (una) imagen. Se ejecuta en un RPi 3b, por lo que no hay mucha memoria disponible.
Quiero agregar una respuesta diferente aquí. Hay algunas opciones que puede utilizar para mejorar el rendimiento de su página web. El uso de <link> con el valor rel de preconnect y preload puede ayudarlo a cargar recursos antes de usarlos:
Use la palabra clave preconnect para el atributo rel para decirle a los navegadores que es probable que el usuario necesite recursos de este origen y, por lo tanto, puede mejorar la experiencia del usuario al iniciar de manera preventiva una conexión a ese origen.
<link rel="preconnect" href="<your-images-base-url"> Use la palabra clave preload para el atributo rel para declarar solicitudes de recuperación en el HTML, especificando los recursos que su página necesitará muy pronto. Esto garantiza que estén disponibles antes y es menos probable que bloqueen el procesamiento de la página, lo que mejora el rendimiento. Tomado de https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload
Crear enlace de precarga:
const preloadLink = document.createElement('link'); document.head.appendChild(preloadLink); preloadLink.rel = 'preload'; preloadLink.as = 'image'; function preloadNextImage(href) { preloadLink.href = href; } function switchImage() { curImage = (curImage + 1) % images.length document.body.style.backgroundImage = 'url(' + images[curImage] + ')'; preloadNextImage(/* <next-image-url> */) }Simplemente puede cargar la siguiente imagen cuando muestre la actual usando el objeto de Image de JavaScript. Cuando switchImages se ejecute de nuevo, la imagen ya estará en el caché de los navegadores. Además, las imágenes almacenadas en caché se almacenan en una nueva matriz, por lo que el "generador" de caché se ejecutará solo una vez. Con este fragmento, necesitará suficiente retraso entre las iteraciones, por lo que la siguiente imagen tendrá tiempo suficiente para descargarse del servidor.
var images = ['images/image01.jpg', 'images/image02.jpg', 'images/image03.jpg', 'images/image04.jpg', 'images/image05.jpg', 'images/image06.jpg', 'images/image07.jpg', 'images/image08.jpg', 'images/image09.jpg', 'images/image10.jpg', 'images/image11.jpg', 'images/image12.jpg', 'images/image13.jpg', 'images/image14.jpg', 'images/image15.jpg', 'images/image16.jpg',]; var numSeconds = 2; var curImage = 0; var cache = []; function switchImage() { curImage = (curImage + 1) % images.length; document.body.style.backgroundImage = 'url(' + images[curImage] + ')'; if(images[curImage + 1] && !cache[curImage + 1]) { cache[curImage + 1] = new Image(); cache[curImage + 1].src = images[curImage + 1]; } } window.setInterval(switchImage, numSeconds * 1000);