Estoy luchando con un problema. Así que obtuve todas las imágenes de un archivo json. Carga y funciona muy bien. El único problema es que cuando hago clic en el elemento HTML, se supone que debe cargar el elemento div con las nuevas imágenes, pero siempre está visible cuando las imágenes se eliminan y se vuelven a cargar con las nuevas. El contenido debajo de las imágenes salta durante un milisegundo, hasta que se cargan los nuevos elementos. Intento hacer algo similar a esto aquí 360 Ansicht , si te desplazas hacia abajo verás el "360 Ansicht".
Creo que las últimas tres líneas de código deberían ser de alguna manera más rápidas. Gracias
let loadPictures = async function ( objectIndex, carColorIndex, carIndex, indexOfActiveCarPicture = 0 ) { const carsThreeSixty = await fetch( '/360view.json' ); const carsThreeSixtyRes = await carsThreeSixty.json(); let pure = Object.entries( carsThreeSixtyRes ); const html = document.createElement( 'div' ); html.classList.add( 'rim-pictures' ); html.classList.add( 'active' ); for ( let j = 0; j < pure[objectIndex][1][carColorIndex].imagesForRotating[carIndex].length; j++ ) { let newImg = new Image(); newImg.src = pure[objectIndex][1][carColorIndex].imagesForRotating[carIndex][j]; html.appendChild( newImg ); } document.querySelector( '.three-sixty-angle-container .color-pictures.active' ).innerHTML = ''; document.querySelector( '.three-sixty-angle-container .color-pictures.active' ).appendChild( html ); $( '.three-sixty-angle-container .rim-pictures.active img' ).eq( indexOfActiveCarPicture ).addClass( 'active' ); };