Estoy trabajando en una imagen en movimiento en desplazamiento que funciona.

El problema es que las imágenes parpadean a medida que se descargan cada vez que se modifican (revisé la pestaña de red de diferentes navegadores). El control de caché y la caducidad de las imágenes se han establecido (a un día) y todas las imágenes están precargadas con JS. Parecía estar funcionando en Safari, pero como no funcionaba en Chrome, agregué el control de caché y la caducidad, y ahora también parpadea en Safari.

No tengo soluciones, ¡hágamelo saber si hay algo que me faltaría!

Código para precargar imágenes (JavaScript):

 function preloadImages(srcs) { function loadImage(src) { return new $.Deferred(function(def) { var img = new Image(); img.onload = function() { def.resolve(img); }; img.onerror = img.onabort = function() { def.reject(src); }; img.src = src; }).promise(); } var promises = []; for (var i = 0; i < srcs.length; i++) { promises.push(loadImage(srcs[i])); } return $.when.apply($, promises).then(function() { // return results as a simple array rather than as separate arguments return Array.prototype.slice.call(arguments); }); } var imgDownloaded = false; preloadImages(genomicsImg).then(function(imgs) { // all images are loaded now and in the array imgs imgDownloaded = true; $(".moving-image-container").css('animation', 'none'); $('#moving-image-container-loading').fadeOut(); $('html').css({ overflow: 'auto', height: '100%' }); }, function(errImg) { // at least one image failed to load });

Código para cambiar de imagen:

 function trackScrollPosition() { const y = window.scrollY - 75; const label = Math.max(Math.min(Math.floor(y/10) + 3, 144), 0); const imageToUse = genomicsImg[label]; // Change the background image $('.moving-image-container').css('background-image', `url('${imageToUse}')`); } $(document).ready(()=>{ $(window).scroll(()=>{ if (imgDownloaded == true) { trackScrollPosition(); } }) })