Wie Laden von HTML-Inhalten mit bxSlider glatter

Meine Website ist live bei http://donoriolo.com/, und ich habe bxSlider mit HTML-Inhalt auf der Titelseite.Wie Laden von HTML-Inhalten mit bxSlider glatter

Mein Problem ist, gibt es ein zweites (oder noch schlimmer auf langsameren Verbindungen als meine, ich bin sicher,), wo der Inhalt vollständig unstyled ist und das gesamte Fenster einnimmt, etwa so:

Auch nachdem alles geladen ist, die Seite verlassen und zurückkommen passiert es für einen Bruchteil einer Sekunde.

Ich habe versucht, mein JS in den Kopf statt am Ende des Körpers, aber kein Glück. Irgendwelche anderen Ideen? ... Oder wäre es besser zu sagen, vergiss es und verwende nur Bilder für den Slider?

Quelle

2016-06-17 Eriyu

Ohne Kenntnis Ihrer Einrichtung kann ich nicht wirklich sicher wissen. Aber meine Vermutung ist, dass Sie JavaScript verwenden, um den Schieberegler in http://donoriolo.com/js/script.min.js zu initialisieren.

Da dieses Skript nach Ihrem Inhalt (DOM) geladen wird, wird es vorerst unausgereift aussehen.

Wie löst man das?

Nun, der einfachste Weg ist, nur das Skript vor dem Inhalt zu laden. Dies kann erfolgen, indem Sie das Skript-Tag anstelle des Endes der <body> an die verschieben. Mit Skript-Tag meine ich natürlich:

Dies bringt das folgende Problem, Ihre Website wird nicht angezeigt, bis das Skript geladen wird. Das ist vielleicht kein großes Problem, aber Besucher mit langsamen Verbindungen (einschließlich vieler mobiler Besucher) werden eine langsame Seitenbelastung bemerken. Auch das ist problematisch bezüglich SEO.

Was ich tun würde, ist der Schieber verstecken:

... 
<div class="bxslider" style="display: none">...</div> 
...

Und wieder zeigen, nachdem das Skript ausgeführt wird, so irgendwo am Ende des script.min.js würden Sie haben:

$('.bxslider').show();

Das könnte dir Ich möchte dies mit einigen ausgefallenen Animationen erweitern, zum Beispiel mit der opacity statt display Eigenschaft.

Quelle

2016-06-17 20:53:31 Tim

Vielen Dank! Wie ich schon sagte, aus irgendeinem Grund hat es das Skript nicht in den Kopf gesetzt, aber die Opazität zu animieren funktioniert großartig. :) – Eriyu

Wie Laden von HTML-Inhalten mit bxSlider glatter

Antwort

Verwandte Themen