I'm struggling with a problem. So I have fetched all the pictures from a json file. It loads and works great. The only problem is that when I click on the HTML element, that supposed to load the div element with the new pictures, but it is always visible when the pictures are removed and reloaded with the new ones. The content below the pictures jumps up for a millisecond, till the new elements are loaded. I try to make similar like this here 360 Ansicht, if you scroll down you will see the "360 Ansicht".

I think the last three code line should be somehow faster to be. Thanks

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' );
};