Json lädt nach dem Rest der Seite auf? [geschlossen] ⇐ HTML

[Anonymous]

Ich bin neu im Umgang mit Javascript und studiere Webdesign. Ich habe einige Probleme mit JSON und einer horizontalen Galerie mit GPS-Unterstützung.
Im Grunde habe ich angefangen, mein Web-Portfolio ohne die Verwendung von JSON zu entwerfen. Ich habe einfach das Zeug (Titel und Beschreibung des Projekts) manuell geschrieben und eine angeheftete Galerie mit horizontalem Scrollen, die durch GPS-Unterstützung ausgelöst wurde, implementiert. Es funktionierte wie vorgesehen und es gab keine Probleme damit.
Als ich nun all diese Informationen (Titel, Beschreibung usw.) in eine JSON-Datei einfügte (damit ich für jede Projektseite die gleiche Struktur haben konnte, wobei sich die Informationen für jede einzelne änderten) und sie mit dem HTML verknüpfte, schien es beim ersten Laden der Seite in Ordnung zu sein, aber die durch Scrollen ausgelöste Galerie wurde über dem Text und nicht wie beabsichtigt danach ausgelöst. Ich konnte es „lösen“, indem ich in Chrome auf die Schaltfläche „Inspizieren“ klickte, aber das gleiche Problem tritt jedes Mal auf, wenn Sie die Seite nach dem Schließen des Webs erneut öffnen. (Link zu einem Video, damit Sie alle sehen können, was ich zu erklären versuche).
Ich dachte zunächst, es läge daran, dass der JSON die Komponenten nach der Galerie auflädt, sodass die Texte nicht als tatsächliche HTML-Objekte gesehen wurden. Ich habe versucht, das Skript an den oberen Rand des Hauptteils zu verschieben (hat nichts gelöst), und mir wurde empfohlen, window.onload zu verwenden, aber ich weiß nicht wirklich, wie das geht. Ich hoffe, dass mir jemand helfen kann, denn ich bin verloren, lol.
VERWENDETES HTML:

Code: Select all

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

JS VERWENDET:

Code: Select all

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