• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage CSS Ladeanimation

T

Tobeias

Neues Mitglied
Hallo Leute,

ich bastle mal wieder an einer Website und hätte da eine Frage. Auf der Startseite ist eine Slideshow die ich via comslider.com erstellt habe und über Java Script läuft, eingebunden wie folgt:

HTML: 
           <div id="comslider_in_point_574785" style="margin-left:1px;"></div>
                <script type="text/javascript">
                    var oCOMScript574785=document.createElement('script');
                    oCOMScript574785.src="comslider574785/comsliderd.js?timestamp=1426161700";
                    oCOMScript574785.type='text/javascript';
                    document.getElementsByTagName("head").item(0).appendChild(oCOMScript574785);
                </script>
             </div>

Da ja das laden von der Slideshow etwas dauern kann würde ich gerne eine Ladeanimation vorher anzeigen lassen, ich habe schon eine passende gefunden bei cssload.net und angepasst. Nun zu meiner Frage: Ist es möglich über CSS die Ladeanimation anzeigen zu lassen bis die Slideshow geladen ist, oder wird dazu auch Javascript benötigt? Letzteres wäre nicht so praktisch weil ich mich bei Javascript nicht so wirklich auskenne :(

Grüße,
Tobi
 
Zuletzt bearbeitet:
Ob das mit CSS geht, weiß ich nicht genau, glaube es aber nicht. Wahrscheinlich kann ich dir aber zeigen, wie es mit Javascript geht. Das schwierigste ist wahrscheinlich, ein Kriterium zu finden, wann man die Ladeanimation deaktiviert und die Slideshow anzeigt.
Edit: Habe diesen Comslider gefunden. Das scheint ein Online-Service zu sein, der die Slideshow auch hostet, so dass es sehr undurchsichtig ist, wie diese funktioniert. Kannst Du mal einen Link zu deiner Seite posten, damit man sich das DOM ansehen kann?
PPS: Wie hast Du die Slideshow eingebunden, mit der gehosteten Version oder hast Du sie herunter geladen?
 
Zuletzt bearbeitet von einem Moderator:
Hm, möglicher Weise habe ich zu kompliziert gedacht: onload für die Bilder registrieren und umschalten, wenn sie alle geladen sind. Aber wahrscheinlich ist es genau so gut, wenn man das onload für die ganze Seite nimmt.
 
Hey,
hab die heruntergeladene Version, da ich diese da selber bearbeiten kann, und bei der Onlineversion zu viele Restriktionen sind um es kostenpflichtig werden zu lassen, so kann ich es selbst bearbeiten und so viele Bilder einfügen wie ich will.

Die konkrete Seite ist nicht online, jedoch weiß ich, dass auf der Seite www.kirchenwirt-waldkirchen.at der gleiche Slider verwendet wurde, ich hoffe, dass euch das weiterhilft und schon mal jetzt vielen Dank für die Antworten.

Ansonsten bitte melden, denn ich weiß grad echt nicht wie ich das lösen soll ^^

Edit: der Slider befindet sich in einem Ordner der gleich heißt, wie der DIV-Container in dem er sich befindet, dort drin ist auch ein Ordner "js" in dem das Java-Script liegt
 
Und in welcher Form liegt deine Ladeanimation vor? Ist das ein GIF?
Wie ich oben schon schrieb, habe ich anfangs etwas zu kompliziert gedacht und es wird doch ziemlich einfach sein, die Animation wegzuschalten, wenn die Seite geladen ist.

Ist übrigens ein interessanter Slider. Den Link habe ich mal zu meinen Lesezeichen genommen.
 
Habe mal etwas ausgearbeitet:
http://jsfiddle.net/Sempervivum/9s7z30fg/1/
Test ist ein bisschen schwierig, weil der Browser das Bild nach dem ersten Laden im Cache hat. Also Cache leeren.
Du musst den Code der Animation in einen Wrapper packen und diesem eine ID geben (falls Du das nicht schon getan hast). Dann im Head dieses Skript notieren:
Code: 
<script type="text/javascript">
window.addEventListener("load", function(){
  document.getElementById("id_deines_wrappers").style.display = "none";
});
</script>
 
Danke Sempervivum, werd ich nachher gleich probieren :)
Ich hoffe nur, dass ich es hinkrieg, hab jetzt ne weile nichts mehr programmiert, da wirds lustig ob ich das hinkrieg, jetzt wo ich so überlege weiß ich eh nicht, wie ich das konkret anfange :-/ weil es ja nicht für das Laden der ganzen Seite ist, sondern ja nur für die Slideshow :-/ hättest du da vielleicht eine Idee? Ich steh da grad auf der Leitung...

die Ladeanimation wird über CSS3 laufen, einfach ein Kreis der zum drehen animiert wird

Ja der Slider is echt gut, vor allem mit einigen anderen hat sich das in einigen Browsern ziemlich verzogen, vor allem der IE spackt da bei vielen, und auf Flash will ich eh verzichten, wegen den ganzen mobilen Geräten.
 
weil es ja nicht für das Laden der ganzen Seite ist, sondern ja nur für die Slideshow
Zum Vergrößern anklicken....
Das wusste ich jetzt nicht. Sollte aber auch kein Problem sein, Du brauchst den Overlay dann nur über die Slideshow zu legen statt über die ganze Seite. Um einen Code anzugeben, müsste man den Code der Slideshow kennen.
Edit: Sehe gerade, dass Du den Code ja am Anfang gepostet hattest. Dann müsste es so funktionieren:
HTML: 
<div id="comslider_in_point_574785" style="margin-left:1px;">
    <div id="ladeanimation">Hier das HTML deiner Ladeanimation</div>
</div>
HTML: 
#ladeanimation {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
}
Code: 
<script type="text/javascript">
window.addEventListener("load", function(){
  document.getElementById("ladeanimation").style.display = "none";
});
</script>
 
Zuletzt bearbeitet von einem Moderator:
Sempervivum schrieb:
Das wusste ich jetzt nicht. Sollte aber auch kein Problem sein, Du brauchst den Overlay dann nur über die Slideshow zu legen statt über die ganze Seite. Um einen Code anzugeben, müsste man den Code der Slideshow kennen.
Edit: Sehe gerade, dass Du den Code ja am Anfang gepostet hattest. Dann müsste es so funktionieren:
HTML: 
<div id="comslider_in_point_574785" style="margin-left:1px;">
    <div id="ladeanimation">Hier das HTML deiner Ladeanimation</div>
</div>
HTML: 
#ladeanimation {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
}
Code: 
<script type="text/javascript">
window.addEventListener("load", function(){
  document.getElementById("ladeanimation").style.display = "none";
});
</script>
Zum Vergrößern anklicken....

Hey, Sorry für die späte Reaktion von mir, hatte echt viel um die Ohren...

Nochmals vielen Dank, ich habs probiert und hab es mal probeweise online gestellt http://www.grueneis-ht.at/test/ aber wie man erkennen kann funktionierts nicht wirklich, zumindest nicht bei mir, hat kurz geladen aber nicht wirklich was angezeigt. Das einzige was ich geändert habe, war, dass ich bei der ID für den Container zur Ladeanimation nocht text-align: center eingefügt hab, damit es zentriert wird
 
Ich bin mir nicht sicher, dass es nicht richtig funktioniert. Es sind ja nur wenige Bilder und sie sind auch nicht sehr groß. Wahrscheinlich geht das Laden so schnell, dass die Animation nur kurz aufblitzt. Wenn Du die Animation testen willst, kannst Du das JS deaktivieren, dann siehst Du sie dauerhaft.
 
Sempervivum schrieb:
Ich bin mir nicht sicher, dass es nicht richtig funktioniert. Es sind ja nur wenige Bilder und sie sind auch nicht sehr groß. Wahrscheinlich geht das Laden so schnell, dass die Animation nur kurz aufblitzt. Wenn Du die Animation testen willst, kannst Du das JS deaktivieren, dann siehst Du sie dauerhaft.
Zum Vergrößern anklicken....

Du hast recht, die Animation selbst funktioniert, allerdings ist sie darüber und somit hinter dem header den ich mit einem höheren Z-Index und position: fixed fixiert habe damit das Menü und der Header immer sichtbar bleiben.

Ich hab es jetzt so hinbekommen, das es zumindest in Ansätzen funktioniert, da es hinter dem Header gelegen ist, hab ich es per CSS-Anweisung mit margin-top runter geschoben, dadurch wird es aber kurz vor dem Text angezeigt.

Habe es jetzt auch mit dem Handy mit Edge-Empfang probiert, allerdings sprengt es da das Layout, deswegen glaub ich, dass ich wohl darauf verzichten sollte, da auch das Javascript zumindest auf meinem iPhone nicht richtig funktioniert und die Animation ständig angezeigt wird. :-/

Edit: Kann mir vielleicht wer sagen, warum mein Menü überall richtig angezeigt wird, nur in der mobilen Ansicht der letzte Menüpunkt in die nächste Zeile geschoben wird? Hab das Menü mit einem höheren z-Index versehen und mit position: absolute, damit nicht immer der Content nach unten geschoben wird. :-/
Dafür funktioniert jetzt doch die Ladeanimation.

CSS-Code für das Menü:
Code: 
#menu {
    font-size:14px;
    position:absolute;
    margin: 0px auto;
    z-index:1000;
}

#menu ul {
    list-style-type:none;
    list-style-image:none;
    margin:0px;
    padding:0px;
    z-index: 1000;
}

#menu li.topmenu {
      float:left;
    z-index: 1000;
}

.topmenu a {
      float:left;
      width:188px;
      height:17px;
      text-align:center;
      vertical-align:middle;
    z-index:1000;
}

.topmenu ul{
      display:none;
    z-index: 1000;
}

.topmenu a, .submenu a{
      padding:1px 5px;
      border: 1px solid #FFFFFF;
      border-collapse:collapse;
      color:#CCC;
      font-weight:bold;
      text-decoration:none;
      background-color:#256CA1;
      margin:0;
    z-index: 1000;
}

.submenu a{
      font-size:14px;
      width:188px;
      position:relative;
      clear:both; /* special IE6 */
    z-index: 1000;
}

#menu a:hover, .topmenu.on a {
      color:#FFFFFF;
      background-color:#256CA1 !important;
    transition: all 0.1s ease-in-out 0.1s; /*IE*/
    -webkit-transition: all 0.1s ease-in-out 0.1s; /*Chrome & Safari*/
    -moz-transition: all 0.1s ease-in-out 0.1s; /*Firefox*/
    -o-transition: all 0.1s ease-in-out 0.1s; /*Opera*/
    z-index: 1000;
}

.topmenu:hover ul {
  display:block;
  z-index: 1000;
}

Es wär ja so konzipiert, das eben auf beiden Seiten mit dem Border ja 1px weiß bleibt.
 
Zuletzt bearbeitet:
Ich habe es mir mal mit der HTML-Ansicht von Firebug angesehen und da wird klar, wo die Probleme herkommen:
Das Slider-Skript organisiert die Struktur um, nimmt das Div "ladeanimation" aus dem Container der Slideshow heraus und legt es eine Ebene höher in das Div "content". Untersuche es selber einmal mit Firebug oder lege Ränder um die beiden Divs der Ladeanimation, dann erkennst Du es. IMO ist es eine schlechte Lösung, zu versuchen, die Ladeanimation an die richtige Stelle zu verschieben. Statt dessen würde ich sie mit Javascript im DOM wieder in den richtigen Kontainer verschieben:
Code: 
$(document).ready(function(){
$("#comslider_in_point_574785").append($("#ladeanimation"));
})
$(window).load(function(){
$("#ladeanimation").css({display: "none"});
});
(im Head, ich habe auf jQuery umgestellt.)
Dann kann man sie auch problemlos mit z-index in den Vordergrund holen.
Außerdem muss das Elternelement der Animation ein position:relative bekommen, damit die absolute Positionierung der Ladeanimation funktioniert:
HTML: 
<div id="comslider_in_point_574785" style="margin-left:1px; position: relative">
Leider habe ich die vertikale Zentrierung der Animation nicht hinbekommen. Versucht habe ich es so:
HTML: 
/*====== Ladeanimation ======*/
/*Container*/
#ladeanimation {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
text-align:center;
vertical-align: middle;
z-index: 1000;
display: table-cell;
}

/*Animation*/
#circularG{
display: inline-block;
position:relative;
width:128px;
height:128px
}
Vielleicht kann jemand, der sich besser mit CSS auskennt, da weiterhelfen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben