Json заряжается после оставшейся части страницы? ⇐ Javascript

[Anonymous]

Я новичок в использовании JavaScript и изучаю веб-дизайн. У меня возникли проблемы с json и горизонтальной галереей на базе gsap.
По сути, я начал разрабатывать свое веб-портфолио без использования json, я просто написал материал (название и описание проекта) вручную и реализовал закрепленную галерею с горизонтальной прокруткой на основе gsap. Он работал так, как задумано, и с ним не было никаких проблем.
Теперь, когда я поместил всю эту информацию (заголовок, описание и т. д.) в json (чтобы я мог просто иметь одну и ту же структуру для каждой страницы проекта с информацией, меняющейся для каждой) и связал ее с html, при первой загрузке страницы все выглядело нормально, но галерея, запускаемая при прокрутке, запускалась поверх текста, а не после него, как предполагалось. Мне удалось «решить эту проблему», нажав кнопку проверки в Chrome, но та же проблема возникает каждый раз, когда вы повторно открываете страницу после закрытия Интернета. (Ссылка на видео, чтобы вы все могли увидеть, что я пытаюсь объяснить).
Сначала я думал, что это связано с тем, что json заряжает компоненты после галереи, поэтому тексты не воспринимались как настоящие объекты html. Я попробовал переместить скрипт в верхнюю часть тела (ничего не решил), и мне рекомендовали использовать window.onload, но я не знаю, как это сделать. Я надеюсь, что кто-нибудь сможет мне помочь, потому что я заблудился, лол.
ИСПОЛЬЗУЕТСЯ HTML:






Checkpoint - Portfolio












HEADER

HEADER
HEADER
HEADER
HEADER


















Proyecto realizado en 2024.






















fetch('/assets/javascript/proyectos.json') //aquí va la ruta a nuestro archivo
.then(response => response.json()) //convertimos la respuesta
.then(data => cargarDatos(data[0])); //CAMBIAR NUMERO PARA NUEVOS PROYECTOS






ИСПОЛЬЗУЕТСЯ JS:

// GSAP SCROLLER

gsap.to(".galeria .fotos",{
transform: "translateX(-180%)",

scrollTrigger:{
trigger:"#galeria",
scroller:"body",
start:"top 2.5%",
end:"bottom -90%",
pin:true,
scrub:2,
// markers:true,
}
})

// TO CHARGA DATA FROM JSON INTO HTML

function cargarDatos (datos) {
console.log(datos.titulo)
contenedor = document.getElementById("intro");
spanTitulo = document.createElement("span")
contenedor.appendChild(spanTitulo);
titulo1 = document.createElement("h1");
titulo1.innerText = datos.titulo;
titulo2 = document.createElement("h1");
titulo2.innerText = datos.titulo2;
titulo2.classList.add("tituloSinSwash");
spanTitulo.appendChild(titulo1);
spanTitulo.appendChild(titulo2);
subtitulo = document.createElement("h2");
subtitulo.innerHTML = datos.subtitulo;
contenedor.appendChild(subtitulo);
descripcion = document.createElement("p");
descripcion.innerHTML = datos.descripcion;
contenedor.appendChild(descripcion);
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... st-of-page