He estado usando $().hide y $().show para hacer una transición fluida entre las imágenes en forma de presentación de diapositivas. Por ejemplo, cuando se presiona la tecla de flecha hacia la derecha, la imagen actual que se muestra se deslizará hacia la izquierda y desaparecerá, la imagen cambiará y se deslizará a la vista desde la derecha. Este es el código que uso para tal transición:

 $('#mainImage').hide("slide", { direction: "left" }, 200); $('#mainImage').show("slide", { direction: "right" }, 700); setTimeout(function() { changeImg(pageNumberNew); }, 200);

La función setTimeout() es puramente para controlar cuándo cambiará la fuente de la imagen en la transición. La variable pageNumberNew es la URL de la imagen a la que se cambiará. Aquí está la función changeImg() :

 function changeImg(number) { document.getElementById('mainImage').setAttribute('src', "/largefiles/2021roadatlas/Images/" + number + ".jpeg"); curPageNumber = number; setWidth(); }

Sin embargo, en la primera transición de imágenes, se volverá muy entrecortado, porque las imágenes aún no se han cargado. He probado varios métodos de precarga de imágenes , como

Precargar imágenes con JavaScript

Precargando imágenes con jQuery

Esperando a que se cargue la imagen en JavaScript

JavaScript esperando hasta que una imagen esté completamente cargada antes de continuar con el script

Pero ninguno de estos ha funcionado.

Una vez que se haya cargado una imagen por primera vez, la navegación de regreso a esa imagen será fluida. Me gustaría una solución en la que estas imágenes se puedan precargar antes de que el usuario comience a interactuar, posiblemente cargando cada imagen antes de que se produzcan las transiciones, lo que provoca un ligero retraso en el inicio de la animación, pero permite que sea fluida.

Puede ver lo que tengo hasta ahora en acción aquí , si escribe 13 y usa las teclas de flecha derecha e izquierda. Es posible que las animaciones no estén entrecortadas si usa una computadora de escritorio, pruebe ese sitio web en el móvil para ver el problema.

PARA SER CLAROS: quiero una forma de precargar imágenes en JavaScript, pero no he podido usar los métodos normales de precarga de imágenes, como se describe anteriormente.