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, que se supone que debe cargar el nuevo elemento div con las nuevas imágenes, siempre está visible cuando las imágenes se eliminan y se vuelven a cargar con las nuevas. Quiero decir que salta hacia arriba y hacia abajo durante un milisegundo, hasta que se cargan los nuevos elementos. Intento hacer algo similar a esto aquí 360 Ansicht, pero mucho más simple, si te desplazas hacia abajo verás el "360 Ansicht".
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' ); };