Html elemente nacheinander laden erzwingen?

Hallo

Ist es möglich die Elemente nacheinander zu laden im HTML Dokument? Dass das script nach der Reihe von oben gelesen wird ist mir klar. Mein Problem ist das einige elemente schon angezeit werden, bevor ein element davor fertig geladen ist und noch nicht sichtbar ist.

2 Antworten

RakonDark

05.12.2020, 14:26

Sinn von parallelem laden nicht verstanden ?

du kannst bilder vorladen lassen und dann quasi anzeigen lassen .

Aber mir fehlt echt die logik , optimiere lieber deine seite , so das sie schnell geladen wird .

Also eher mit sichtbarkeit arbeiten , obwohl mir völlig entgeht warum du überhaupt ein problem damit hast . Das ist doch gerade ds tolle das die webseite ganz gelesen wird damit auch der Aufbau vom Browser bewerkstelligt werden kann . dinge die nachladen oder warten verändern dann ständig das layout und es wird hin und her gesprungen (flipping) dann halt mit platzhaltern arbeiten oder auf nerfige werbung verzichten , sowas verlässt jeder bzw geht kein zweites mal drauf , weil merkt sogar der blinde das das einfach nur unütze logik ist .

und wer werbung nachträglich läd, tja der muss sich dann auch darauf verlassen das da die werbung auch kommt , sonst gehts ja nciht weiter .

ansonsten halt stück für stück nachladen . on dir das besucher danken ist dann noch eine zweite frage .

üblicherweise hat man sich zwischendurch mal entschieden , webseiten mit einem ladelayer zu bestücken und im hintergrund dann die biler fertig zu laden .

das sind genau die seiten die man sofort wieder verläßt . weil andere seite bieten halt schon kontent und nicht "bitte Warten .... bitte Warten ... nur weil irgendein graphiker mit im Team ist der irgendwie schreibmaschinen denken hat und einfach nicht in die neue Zeit gehen will .

Und was machst du wenn eine source halt länger brauch bzw gar nciht geladen werden kann , dann wird die webseite NICHT angezeigt ? ist das deine intension .

Das mag Dir gefallen , kunden suchen sich lieber was neues , wo der content nciht so knickerich ist und sich einfach darum gekümmert hat z.b. bilder klein zu halten und nicht direkt von der camera ins web zu packen .

kleinschwendi

Fragesteller

05.12.2020, 15:07

Also.. es geht nur um ein Element. Wollte ja nicht den 3. Weltkrieg auslösen. Ich habe eine svg animation welche zuerst geladen werden muss. Doch bevor das passiert wird ein Element angezeigt, welches erst nach dem Beginn der animation angezeigt werden soll.

Aber demnach löse ich es mit jquery .onload und tausche die Klassen.

gogogo

05.12.2020, 14:14

Da fällt mir nur das ein, was mal Web 2.0 genannt wurde.

Per JavaScript nach und nach einzelne HTML Daten per CGI vom Server nachladen und in dein HTML-Dokument einfügen/ersetzen.

Ich suche ein einfaches Beispiel wie man ein HTML Element von links nach rechts schieben laest sobald das browser fenster runter gescrollt wird an den punkt wo das html element sichtbar sein soll.

ihr kennt das bestimmt was ich meine, diese modernen webseiten designs haben sowas oft, dann sieht alles bisjen cooler aus.

es gibt aber so viele verschiedene beispiele das ich nicht so das richtige finde.

was ich will ist ganz einfach das html element nach schieben und am besten noch mit so ein effekt dazu zum beispiel von durchsichtig zu undurchsichtig.

...zur Frage

JavaScript in HTML aufrufen?

Hallo zusammen
Ich brauche eure Hilfe, weil ich noch nicht viel mit JS gemacht habe.

Ich habe bis jetzt immer mein <script>-Tag mit Funktionen und Variablen in der HTML-Datei gehabt - hat immer funktioniert.

Jetzt will ich das <script>-Tag in eine eigene Datei ablegen.
Um das zu verschachteln und projektorientiert zu machen, dass man nicht für jede Seite die Funktionsänderung vornehmen muss.

Deswegen hab ich mit "<script src="/fileadmin/public/js/myScript.js"></script>" die JS-Datei in die HTML-Datei implementiert.

Mein Problem: Die Events führen nicht mehr aus.

Liegt das an daran, dass document.getElementById sich die ID aus dem internen dokument sucht?
Wie kriege ich, dass die ID von der HTML-Datei angesprochen werden?

Vielen Lieben Dank und liebe Grüße

...zur Frage

HTML Master Element auf mehreren Seiten einbinden?

Ich bin gerade an meinem Portfolio, welches ich selbst über HTML "code".

Die basic Skills reichen mir dazu eigentlich und den Rest bekomme ich von Codepen, aber eine Frage habe ich, welche ich nicht im Netz beantwortet bekommen habe. Oder zumindest weiß ich nicht genau, nach was ich googeln soll.

Ich habe auf jeder Seite dasselbe Menü.
Muss ich das nun auf jeder Seite händisch einpflegen oder kann ich irgendwie einen HTML-Schnipsel mittels PHP von einer anderen Seite auslesen.

Daher ich habe z.B. ein Stück Code welches auf jeder meiner .html Seiten zu finden ist. Ändere ich diesen Codeschnipsel, wird er automatisch auf allen eingebundenen Seiten ebenfalls geändert. So eine Art "Mastertemplate". Ich hoffe ihr versteht, was ich meine.

Und das am besten mit mehreren Objekten. Z.B. Header, Footer und noch andere Elemente, die dann auf die Unterseiten kommen werden.

Da eine komplette Antwort zu dem Thema vermutlich zu komplex ist, gerne auch einfach ein Tutorial verlinken.

Danke!

...zur Frage

Mithilfe von Java Script HTML Dateien auf einen Server laden?

Ich hab mir folgendes Script gebastelt: 
document.write(<OPTION></OPTION>);

...zur Frage

Website dauerhaft mit Javascript bearbeiten?

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>
      <input placeholder="Irgendwas eingeben" id="password">
    </div>
    <button onclick="password()"> Press Me</button>
    <script>
      
      function password() {
        let password = document.getElementById('password').value;
        let element = document.createElement('div');
        element.innerText = password;
        document.body.appendChild(element);
      }
    </script>
  </body>
</html>

Hi wenn ich nun die Website neu Lade dann bleiben die Divs nicht bestehen,

kann mir jemand sagen wie ich die Divs dauerhaft auch für andere clients sichtbar

behalten kann.?

...zur Frage

HTML: Warum hält "sticky" nicht perfekt?

Ich habe drei div-Elemente von diesem Aufbau:

<div position:sticky; top=0px><table>Zwei Zeilen, mehrere Spalten</table></div>

<div position:sticky; top=50px><table>Zwei Zeilen, mehrere Spalten</table></div>

<div><table>mehrere tausend Zeilen, 'eine' Spalte</table></div>

Wenn ich nun im Element "C" zu scrollen beginne, ist zunächst alles wie gewünscht. A und B bewegen sich nicht.

Aber wenn jene Zeile, die nach dem Laden nicht zu sehen war (erste Zeile der zweiten Bildschirmseite), am Element "B" ankommt, beginnt sich dieses ebenfalls nach oben zu verschieben (zunächst hinter "A", z-index).

Kommt nun auch diese Zeile (der zweiten Bildschirmseite) am Element "A" an, verschiebt sich diese ebenfalls und es ist nur noch das Element "C" zu sehen.

Was kann ich tun, damit auch beim Scrollen A, B permanent zu sehen ist, selbst dann, wenn schon viele Bildschirmseiten gescrollt wurden?

...zur Frage

NavBar auf jeder Unterseite einbauen (Webdevelopment)?

Hallo, es gibt auf so ziemlich jeder Website Elemente, die auf fast jeder Unterseite vorkommen. Ein Beispiel dafür wäre die NavBar. Diese ist bei den meisten Websites überall. Wie bringt man aber dieses Element auf jede Unterseite? Bei jeder Unterseite den ganzen HTML, CSS und JavaScript Code reinzukopieren wäre ja sehr mühsam.

Diese Aufgabe kann man mit Framworks lösen, wie z.B. VueJS wo man Komponenten verwendet. Welche Methoden gibt es sonst noch, vielleicht sogar ganz ohne Framework?

...zur Frage

HTML Element Click - Counter / Zähler?

Hey, also ich wollte fragen ob jemand weiß, wie ich einen HTML Element Script so schreibe, dass man einen ,,counter hat'' (Ich hab keine ahnung von programmieren, aber bräuchte das).

Wenn man sozusagen auf den + Button drückt, zählt es eine zahl hoch. Auf dem - Butoon zählt es dann runter. Ist das irgendwie möglich?

...zur Frage

stimmt dieser code?

ich hab was ausprobiert aber da scheint was falsch zu sein, sieht man einen Fehler auf den ersten blick?

schreibe den javascript code für ein spiel und erkläre hinterher wie es funktioniert

// variablen
let score = 0;
let time = 10;

// Elemente im HTML-Dokument auswählen
const scoreDisplay = document.getElementById('score');
const timeDisplay = document.getElementById('time');
const startButton = document.getElementById('start-button');
const gameArea = document.getElementById('game-area');

// Start
startButton.addEventListener('click', startGame);

function startGame() {
  startButton.disabled = true;
  score = 0;
  time = 10;
  scoreDisplay.textContent = score;
  timeDisplay.textContent = time;
  gameArea.addEventListener('click', increaseScore);
  countdown();
}

// Punktzahl erhöhen
function increaseScore() {
  score++;
  scoreDisplay.textContent = score;
}

// Countdown-Funktion
function countdown() {
  const timer = setInterval(() => {
    time--;
    timeDisplay.textContent = time;
    
    if (time === 0) {
      clearInterval(timer);
      endGame();
    }
  }, 1000);
}

// ende
function endGame() {
  gameArea.removeEventListener('click', increaseScore);
  startButton.disabled = false;
  alert('Deine Punktzahl: ' + score);
}

Der Code beginnt mit der Initialisierung einiger Spielvariablen:

(Punktzahl) und

(Zeit). Diese Variablen werden später im Spiel verwendet, um den Fortschritt des Spielers zu verfolgen.

Als Nächstes werden einige Elemente im HTML-Dokument ausgewählt, die zur Anzeige und Interaktion mit dem Spiel verwendet werden. Dazu gehören das Element, das die Punktzahl anzeigt (

), das Element, das die verbleibende Zeit anzeigt (

timeDisplay

), der Startbutton (

startButton

) und das Spielfeld (

gameArea

startButton

erhält einen Eventlistener, der auf das Klicken des Buttons reagiert. Sobald der Startbutton geklickt wird, wird die Funktion

startGame

aufgerufen.

Die Funktion

startGame

wird aufgerufen, wenn das Spiel gestartet wird. Sie deaktiviert den Startbutton, setzt die Punktzahl und die verbleibende Zeit auf ihre Ausgangswerte zurück und aktualisiert die Anzeige entsprechend. Ein Eventlistener wird dem Spielfeld hinzugefügt, um auf Klicks des Spielers zu reagieren und die Punktzahl zu erhöhen. Die Funktion

countdown

wird aufgerufen, um den Countdown zu starten.

Die Funktion

increaseScore

wird aufgerufen, wenn der Spieler auf das Spielfeld klickt. Sie erhöht die Punktzahl um eins und aktualisiert die Anzeige entsprechend.

Die Funktion

countdown

startet den Countdown von 10 Sekunden. Dazu wird ein Timer mit

setInterval

verwendet, der alle 1000 Millisekunden (1 Sekunde) die verbleibende Zeit um eins verringert und die Anzeige aktualisiert. Wenn die Zeit auf 0 reduziert wird, wird der Timer mit

clearInterval

gestoppt, und die Funktion

endGame

wird aufgerufen.

Die Funktion

endGame

beendet das Spiel. Sie entfernt den Eventlistener vom Spielfeld, aktiviert den Startbutton wieder und zeigt eine Benachrichtigung an, die die erreichte Punktzahl des Spielers anzeigt..

...zur Frage

HTML Problem Elementen Hintergrund?

Hallo,
eine kurze, Frage. Wie kriege ich das in css hin das alle Elemente einen Grauen Hintergrund bekommen ohne das ich das für jedes Element einzeln machen muss und ohne das ich den HTML Code ändern muss? Also wirklich nur die Elemente nicht den ganzen body.

...zur Frage

JS script richtig importieren?

Wenn ich meine JS Skripte in meinem HTML Dokument schreibe funktionieren die Super. Wenn ich diese dann aber in den Header Schreibe

 <script type="text/javascript" src="scripts/JavaScript.js"></script>

Dann geht alles was mit dem Script zutun hat nicht.

...zur Frage

Element-Inhalt abrufen?

Ich programmiere seit einiger Zeit mit HTML CSS und JS und habe mit Getboostrap eine Website erstmals geschrieben, wo mein Ziel es war dass man dort einen Key eingeben kann womit man dann auf eine weitere HTML Datei umgeleitet wird die den Namen hat. Damit meine ich das wenn man als Key hallo123 eingibt das man auf die Seite Hallo.html umgeleitet wird. Ist zwar nicht gerade so sicher aber es reicht für den Start aus. Ich habe jetzt aber das Problem das ich bei "document.getElementById()" nicht dem Inhalt aus dem Eingabe Feld erhalte wodurch man egal was man eingibt zu null.html umgeleitet wird. Weiß jemand wie ich das Behebe?

<!doctype html>
<html lang="en">


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mit Projekt-Key herunterladen | LSprojects</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<style>
body {
    background-color: rgb(26, 24, 24);
    color: white;
}
.btn  {
    background-color: rgb(161, 156, 156);
    color: white;
}
</style>
<script>
    function submit() {
        let code = document.getElementById(codeinput);
        window.location = "/codes/" + code + ".html"
    }
</script>


<body>
    <div class="vertical-center horizontal-center">
        <h1>Geben sie den Key hier ein:</h1>
        <div class="input-group mb-3 dark-backround">
            <button href="submit()" onclick="submit()" class="btn btn-outline-secondary" type="button"
                id="load">Laden</button>
            <input type="text" class="form-control" placeholder="Projekt-Key" id="codeinput" aria-label=""
                aria-describedby="load">
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
        crossorigin="anonymous"></script>
</body>


</html>

...zur Frage

Textfeld in MySQL Datenbank ohne Reload?

Hallo gutefrage.net Community,

Ich möchte für ein aktuelles Projekt einen Stundenzettel für Mitarbeiter erstellen. Der Aufbau ist im Anhang.

Also im Grunde möchte ich nach der Auswahl der Stunden einen Script durchlaufen, der sich aus der Datenbank die Daten vom Dienstplan holt, das dann verrechnet und wieder abspeichern, ohne dass die Seite neu laden muss.

Das soll ohne einen Speichern Button funktionieren.

Da PHP ja auf dem Server bearbeitet wird kann man nicht einfach mit Javascript den (aktuell mit PHP geschriebenen) script ausführen der das abrufen, rechnen und speichern durchführt.

Wisst ihr eine Möglichkeit wie ich das umsetzen kann?

Mit den sprachen javascript, php, html und MySQL reicht die Theorie bei anderen währe ein Code Beispiel nett.

MFG, Die Zeitmaschiene

...zur Frage

Html in apps bearbeiten?

Kann man irgendwie in Apps das Html element oder script element untersuchen wie im Browser und dann die Schrift verändern? Zum beispiel browser kann man links klick element untersuchen und dann kann man was anderes hinschreiben, kann man das auch irgendwie bei Apps machen?

Android 11

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen