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

[Anonymous]

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

Код: Выделить всё

// JS USED:
// 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);
}

Код: Выделить всё

Checkpoint - Portfolio












[url=index.html]HEADER[/url]

HEADER
HEADER
HEADER
HEADER





  





[img]assets/imagenes/proyectos_checkpoint/Phones Mockup Bundle-copia.jpg[/img]
[img]assets/imagenes/proyectos_checkpoint/Phones Mockup Bundle-copia2.jpg[/img]
[img]assets/imagenes/proyectos_checkpoint/Phones Mockup Bundle-copia3.jpg[/img]




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

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