CSS Spinner nur bedingt sichtbar

Gelöst mattatouille
(@mattatouille)

vor 7 Jahren, 10 Monaten

Tag zusammen,
diesmal kann es sein, dass Ihr mich in ein anderes Forum verweist, da es unter Umständen keine direkte WordPress Frage ist.
Ich möchte eine Ladeanzeige für Bilder integrieren, sprich einfach nur einen Spinner, welchen ich in CSS designe.
Jedoch ist er nicht sichtbar, wenn ich seine Laufzeit durch folgenden JavaScript Code beeinflussen möchte (habe den Code vorerst direkt in die header.php geschrieben, um seine Funktionalität zu testen, bevor ich ihn in eine eigene Datei separiere).

Code-Schnipsel js

Sichtbar wird er jedoch, wenn ich zwischen Zeile 24 und 25
echo 'alert("text");';
ergänze. Jedenfalls wird der Spinner so lange sichtbar, wie das Alert sichtbar ist. Ja, es ist richtig, es wird dann die „showPage“ aufgerufen, in welcher der Spinner nicht mehr angezeigt wird und der Slider „visible“ wird. Jedoch beginnt er erst dann tatsächlich mit dem Laden des Sliders. Obwohl die Abfrage der geladenen Images schon stattgefunden hat. Ist es überhaupt richtig an dieser Stelle lediglich die Images anzusprechen? Oder muss ich, wie auch immer, auf die Funktion warten? Sprich, diese hintergründig laden, während der Spinner noch angezeigt wird.

Ersetze ich im Code die Zeile 25, durch
echo 'myVar = setTimeout(showPage, 3000);';
Ist er trotzdem nicht sichtbar. Es ist, während er die 3 sek wartet lediglich ein weißes Fenster an der Position zu sehen, an welcher sich der Slider befinden wird.
Ja, es existiert keine Variable „myVar“, aber beim Versuch habe ich sie natürlich vorher deklariert.

Ist der Post in diesem Forum richtig? Falls nicht, würdet Ihr mir in diesem Fall trotzdem noch helfen?:)

edit:
In diesem Fall würde ich mich, falls sich keine direkte Lösung im Code findet, auch mit einem Plugin zufrieden geben, aber eine Code-Lösung wäre mal wieder deutlich schöner.

Gruß
Matta

Ansicht von 6 Antworten - 1 bis 6 (von insgesamt 6)

Thread-Starter mattatouille
(@mattatouille)

vor 7 Jahren, 10 Monaten

Habe das Thema als „resolved“ markiert, da ich einfach ein Plugin nutze, um Zeit zu sparen. Das soll aber Niemanden daran hindern eine entsprechende Code-Lösung zu bieten, um evtl zukünftig suchenden eine Antwort zu bieten.

Gruß
Matta

WordPress Entwickler
(@aminteractiondesign)

vor 7 Jahren, 10 Monaten

Also hier hast du schonmal nen Fehler drin:

echo 'document.getelementById("spinner").style.display = "none";';
getElementById

Hast du dir mal angeschaut, ob Fehler in der console angezeigt werden?

Also ich würde verrückt werden, wenn ich jede JS-Zeile mit einem extra echo ausgeben müsste 😉

Thread-Starter mattatouille
(@mattatouille)

vor 7 Jahren, 10 Monaten

Übersehen :/
Werde mich an das Thema nochmal begeben, wenn die Seite steht und ich mich daran mache, nach und nach, die Plugins zu reduzieren.
Da achte ich zwar aktuell schon drauf, aber bin noch absolut unzufrieden. Jedoch drängt die Zeit ein wenig 🙂

Ja, das ist auch extrem ätzend, erschien mir aber die einfachste und schnellste Möglichkeit, testweise JS in PHP zu integrieren.
Das sollte am Ende natürlich nicht so stehen bleiben 😉

Ich werde mich in ein bis zwei Wochen nochmal mit vollem Herzblut an die Sache begeben. Die Konsole habe ich nicht großartig beachtet, weil auf der Arbeit der Kopf noch in anders sprachigem Code steckte.

Ich muss es mal machen, wenn ich nicht auf der Arbeit bin und tatsächlich Zeit dafür habe, nebenläufig ist es dann doch nicht sonderlich optimal.
WordPress Entwickler
(@aminteractiondesign)

vor 7 Jahren, 10 Monaten
Du kannst doch einfach den php-bereich schließen und dann dein JS schreiben:
```
?>
<script type="text/javascript">
function geladen() {
var gesamt = document.images.length;
[...]

<?php
hier wieder php-code
```
Thread-Starter mattatouille
(@mattatouille)

vor 7 Jahren, 10 Monaten

Okay, wie gesagt. Sind nicht meine Sprachen, da war ich mir nicht sicher, wie das mit der Abfrage funktioniert. Aber in php, kann ich nach dem ‚if‘ einfach schließen und später einfach per endIf beenden und dazwischen packe ich anderen Code, korrekt? Das war mir vor ein paar Tagen noch nicht ganz geläufig;)

WordPress Entwickler
(@aminteractiondesign)

vor 7 Jahren, 10 Monaten

Ja, das geht!
Ich bin zwar auch kein Fan davon und finde es sieht nicht toll aus und ist auch nicht gerade gut lesbar, aber im WordPress-Universum wird das ständig so verwendet.

Ansicht von 6 Antworten - 1 bis 6 (von insgesamt 6)

Das Thema „CSS Spinner nur bedingt sichtbar“ ist für neue Antworten geschlossen.

Themen-Schlagwörter

Ansichten