Laden Sie die Seite zuerst herunter und animieren Sie dann den Inhalt

Gibt es eine Möglichkeit, einen Browser dazu zu zwingen, auf den Download einer Seite zu warten, bevor der Inhalt angezeigt wird?

Ich habe eine Webseite mit mehreren Animationen auf. Beim ersten Mal sind die Animationen ruckelig und sehen unglaublich falsch aus, da der Inhalt, den sie animieren, noch heruntergeladen wird. Ich muss zuerst alles herunterladen, damit die Animationen dann reibungslos ausgeführt werden können. Ist das möglich?

Die Animationen sind CSS3-Animationen.

Vielen Dank

0
Haben Sie versucht, .load() Ereignis.?
hinzugefügt der Autor Rajaprabhu Aravindasamy, Quelle
Nein, die Animationen sind CSS-Animationen! (Entschuldigung)
hinzugefügt der Autor jskidd3, Quelle
@FritsvanCampen genau
hinzugefügt der Autor jskidd3, Quelle
@SecretSquirrel Ja, das ist ein guter Vorschlag. Ich hatte auf etwas Besseres gehofft, was die Ausführung des Browsers beeinflussen würde. Stellen Sie z. B. keinen Inhalt vor, bis die gesamte Seite heruntergeladen wurde
hinzugefügt der Autor jskidd3, Quelle
hast du die $ (window) .load() Methode versucht?
hinzugefügt der Autor Harsha Venkatram, Quelle
Was sind die Animationen? Blitz? gif?
hinzugefügt der Autor Halcyon, Quelle
Oh, also ist das Ruckeln, weil der Browser zu sehr damit beschäftigt ist, deine Seite zu rendern?
hinzugefügt der Autor Halcyon, Quelle
kann $ (document) sein .ready() wird sich als nützlich erweisen
hinzugefügt der Autor patel.milanb, Quelle
Würde es möglicherweise helfen, die Animationen zu verzögern? link
hinzugefügt der Autor Secret Squirrel, Quelle

2 Antworten

$(window).on('load', function() {
   //do stuff
});

wartet darauf, dass die Seite und externe Ressourcen wie Bilder geladen werden, bevor sie ausgelöst werden.

Wenn die Animationen CSS-Animationen sind, verwenden Sie Klassen oder andere Selektoren und hängen Sie diese an, wenn das Fenster geladen wurde, um die Animationen zu starten

$(window).on('load', function() {
    $('.animated').addClass('start');
});

und in CSS

.animated {
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}

.start {
   color: red;
   left: 100px;
   /* whatever you'd like to animate */
}
0
hinzugefügt
@FritsvanCampen - Das stimmt, abhängig von der Site, könnte es viele Möglichkeiten geben, dies zu tun, also ist es ein wenig zu involvieren, um die Antwort hinzuzufügen, aber wenn das Laden von Bildern etc. kein Problem ist, würde document.ready wahrscheinlich Es wäre ein besserer Zeitpunkt, um die Animationen zu starten, und wenn es andere Ressourcen gibt, die nicht auf window.onload geladen wurden, wäre vielleicht ein load Event-Handler für diese Ressourcen notwendig usw. Dies sollte zumindest eine Vorstellung davon vermitteln, wie CSS ausgelöst wird Animationen mit Javascript unter Verwendu
hinzugefügt der Autor adeneo, Quelle
Diese Antwort ist ziemlich genau richtig. Ich möchte hinzufügen, dass vielleicht $ (window) .on ('load' nicht der richtige Zeitpunkt ist, um zu beginnen. Sie könnten früher anfangen oder möchten vielleicht noch etwas länger warten Wie viel geschieht gerade? Eine gute Möglichkeit, das load -Ereignis zu beschleunigen, besteht darin, das Laden von Ressourcen zu verzögern, die nicht sofort benötigt werden (wie Dinge, die nicht auf dem Bildschirm angezeigt werden).
hinzugefügt der Autor Halcyon, Quelle
$(window).load(function() {
    /* here you can use some "addClass" functions. Once added they trigger your CSS animations */
});
0
hinzugefügt
Richten Sie einige Klassen ein, die den Animationen gewidmet sind, und fügen Sie sie auf diese Weise Ihrem Code hinzu, damit sie erst starten, wenn alles andere geladen ist.
hinzugefügt der Autor Alan Piralla, Quelle
JavaScript - Deutsche Gemeinschaft
JavaScript - Deutsche Gemeinschaft
3 der Teilnehmer

In dieser Gruppe sprechen wir über JavaScript.