jQuery nur einmal ausführen - beim Aufrufen der Seite (Preloader)

pfump

Hallo,

ich brauche mal kurz Euer Expertenwissen.

Es geht um die Seite h2weiss.amedia-wenzel.de

Dort soll, wenn man die Seite aufruft eine Art Preloader angezeigt werden. Dazu hab ich folgenden Code eingefügt:

Code

        <div id="main" class="active">
            <div id="image">
                <img id="myImage" src="images/logo.png" />
                <div id="counter">
                    <span id="c1"></span><br>
                    <span id="c2"></span><br>
                    <span id="c3"></span>
                </div>            
            </div>
        </div>

<script type='text/javascript'>

$(document).ready(function(){
   if($("#main").hasClass("active"))
   {
        $('#image').delay(0).fadeIn(1500).delay(0).fadeOut(1500);
        $('#main').delay(3500).fadeOut(250);
        $('#main').removeClass("active");
        $('#main').addClass("deactive");
   }
});
</script>

Alles anzeigen

Das css dazu sieht folgendermaßen aus:

Code

#main{
    width: 100%;
    height:100%;
    display:block;
    z-index:99999;
    background-color: rgb(255,255,255,1);
    position:fixed;
}
#image{
    text-align: center;
    position:    absolute;
    top:50%;
    transform:translateY(-50%);
    display:none;
}

#image img{
    /* max-width: 60%;*/
    max-width: 60%;
}
#counter{
    /*text-align: center;
    min-width:500px;*/
    position:relative;
    top:50px;
}

#c1{
    font: bold;
    /*font-size: 2em;*/
}

#c2{
    font: bold;
    /*font-size: 1.5em;*/
}

#c3{
    font-size: inherit ;
}

Alles anzeigen

Das funktioniert soweit auch ganz gut. Allerdings wird "der Preloader" immer wieder angezeigt. Also nicht nur beim Aufrufen der Seite, sondern auch wenn man auf einen Link auf der

Seite klickt.

Wie kann ich das Script nur 1 mal aufrufen, also beim 1. Laden der Seite?

zero24

Zitat von pfump

sondern auch wenn man auf einen Link auf der
Seite klickt.

Ja da immer die active Klasse da sein wird, deine Seite wird ja immer wieder neu genieriert. Du müsstest aus dem JS ggfs an die session weitergeben das dieser pre loader bereits einmal gelaufen ist. Und dann nicht eine Klasse sondern die session abfragen ob der pre loader bereits gelaufen ist oder nicht.

pfump

Ich hab das auch mit ner Variable versucht, aber das ging leider auch nicht. Wie mache ich das mit der session?

zero24

Ja das JS ist ja nur auf der aktuellen Seite aktiv sobald du weiter navigierst wird die Seite neu generiert und die Variable bzw. deren gesetzter Wert ist wieder weg. Über mehrere Seiten hinweg auf Variablen zuzugreifen müssten diese in die DB oder in die Session geschrieben werden.

Das könnte mann z.B. mit einem ajax call machen. Also einer PHP Funktion welche dann mittels

Code

$session = $this->getApplication()->getSession();
$session->get('uniquesessionkey', $value);

den aktuellen Wert ausliest und dann über

Code

$session = $this->getApplication()->getSession();
$session->set('uniquesessionkey', $value);

Den Wert in die Joomla session des aktuellen Users schreibt.

Vielleicht kommst du als Entwickler mit dieser Dokumentation schon weiter: Using Joomla Ajax Interface – Joomla! Documentation da ist auch ein Beispiel mit der Session.

Am besten baut man dieses Feature dann auch als Joomla Plugin wo dann die ganzen AJAX Features drin sind und das Plugin dann die Kommunikation mit Joomla macht.

Ggfs. gibt es für das was du vor hast auch schon ein fertiges Plugin/Modul was dieses Problem schon gelöst hat.

pfump

Ich hab das jetzt mal so geschrieben. Bin beim suchen auf sessionStorage gestoßen.

Code

$(document).ready(function(){
    var yetVisited = sessionStorage.getItem["visited"];
    alert(yetVisited);
   if (!yetVisited)
   {
        $('#image').delay(0).fadeIn(1500).delay(0).fadeOut(1500);
        $('#main').delay(3500).fadeOut(250);
        $('#main').delay(3500).setClass("deactive");
        sessionStorage.setItem("visited", "yes");        
   }
});

Alles anzeigen

Leider ist die Variable yetVisited immer undefiniert.

zero24

ggfs kann man auch mit plain JS eine eigene session schreiben und die dann abfragen, damit bewegt man sich dann aber auch direkt außerhalb der session von Joomla und das wäre eher eine Hammer drauf methode.

zero24

Zitat von pfump

Leider ist die Variable yetVisited immer undefiniert.

Da hört leider langsam mein JS wissen auf.

Versuch mal

Code

sessionStorage.getItem("visited");

vs

Code

sessionStorage.getItem["visited"];

pfump

Ja, den Fehler habe ich auch schon bemerkt. Aber daran lag es leider nicht.

zero24

Hmm das übersteigt leider mein JS wissen ggfs kann man da noch etwas weiter googlen wie das mit den sessions funktioniert im plain JS.

Hab das hier gefunden mit einem Beispiel: Window: sessionStorage property - Web APIs | MDN (mozilla.org)

Das gibts auch nochmal den unterschied zwischen sessionStorage und localstorage, ggfs. kommst du damit weiter: Window: localStorage property - Web APIs | MDN (mozilla.org)

Elwood

Zitat von pfump

Dort soll, wenn man die Seite aufruft eine Art Preloader angezeigt werden.

Du nutzt doch das Astroid-Framework.

Dort ist doch schon eine Preload-Funktion vorhanden:

Einfach aktivieren, angepasstes Logo einfügen, Einstellungen anpassen.

pfump

Hallo. Sorry für die späte Rückmeldung. Ja diese Funktion gibt es.

Nur leider soll es so sein, das das Logo eingeblendet wird, kurz bleibt und dann wieder verschwindet.

Bei der Preload-Funktion sieht man das Logo nur ganz kurz.

Elwood

Zitat von pfump

Bei der Preload-Funktion sieht man das Logo nur ganz kurz.

Man könnte vielleicht die Zeit in der .php bzw. .js einstellen und dann ein Override erstellen,

wenn jetzt deine Version nicht funktionieren sollte.

Tags