WebSite X5Help Center

 
A. Huser
A. Huser
User

Preloader  de

Autor: A. Huser
Besucht 1179, Followers 2, Geteilt 0  

Guten Tag

Hat man auf einer Website sehr viele Inhalte (z. B. Bilder oder Videos), so kann dies die Ladezeit stark erhöhen. Damit der Besucher keine halbfertige Seite präsentiert bekommt, kann man ein animiertes Lade-Icon – einen sogenannten Preloader – vorschalten.

Es wäre sehr gut, wenn Sie ein Tool (Object) machen würden, dass man dies auf der Website einbauen könnte!

Nochmals zum Preloader - leider habe ich von den Entwicklern leider (noch?) KEINE Antwort erhalten. Da ich kein Profi-Programmierer bin wäre es toll wenn ich eine Antwort auf Deutsch erhalten würde.

Meine www:  www.huser-gaertnerei.ch

@ user René W. : Danke für Deinen Tipp, aber ich kann damit leider nichts anfangen, weil ich nicht Deine Kentnisse habe. Vielleicht meldest Du Dich per PN?

Freundliche Grüsse

Armin Huser

Gepostet am
4 ANTWORTEN - 2 NüTZLICH
René W.
René W.
User

Privatnachrichten sind, so viel ich weiss, hier nicht möglich.

Es ist ganz simpel.
Du erstellst auf 3, Sitemap, eine neue Seite.
Markierst die neue Seite
Du gehst auf 4. Erstellen der Seiten.
Dort fügst Du 6 Zeilen ein und nur 1 Spalte.
In die oberste Zeile kommt das Icon rein </> (HTML Code).
Doppelklich darauf, dann erscheint: HTML-Code.
Dort kopierst Du diesen Code rein:
<!-- Start of 1 progress Bar -->
<div class="progressbar clearfix " data-percent="100%">
<div class="progressbar-title"><span>Loading ...... Please Wait</span></div>
<div class="progressbar-bar" style="background: #4288d0;"></div>
<div class="progress-bar-percent">100%</div>
</div>
<!-- End of 1 progress Bar -->

In die unteren *5 Felder kommt zum Beispiel der Mansory rein.
Dort wird die Liste der Bilder mit den Fotos gefüllt.
* heisst die Gallerie wird auf die 5 Zeilen eingefügt.
Fertig.
Aber wie bereits geschrieben, es ist eine reine Animation und kei Preloader.



Mehr lesen
Gepostet am von René W.
René W.
René W.
User

Wichtiger Nachtrag, leider hatte ich noch Einiges weggelassen:
Bei Erstellen der Sitemap den erstellten Seitentittel markieren.
Dann ganz oben auf Eigenschaften, doppelcklick.
Dann erscheint Eigenschaften der Seite. SEO Grafik Erweitert.
Dort anwählen: Nach dem <BODY>-Tag.
Dort einfügen:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.progressbar').each(function(){
jQuery(this).find('.progressbar-bar').animate({
width:jQuery(this).attr('data-percent')
},7000);
});
});
</script>
---------------------------------------------------------------------------------------------------------
In die oberste Zeile kommt das Icon rein </> (HTML Code).
Hier hatte folgendes noch gefehlt:
Anwählen Erweitert
Hier dann folgendes einfügen:

<style>
.progressbar {
position:relative;
display:block;
margin-bottom:15px;
width:100%;
background:#eee;
height:35px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-webkit-transition:0.4s linear;
-moz-transition:0.4s linear;
-ms-transition:0.4s linear;
-o-transition:0.4s linear;
transition:0.4s linear;
-webkit-transition-property:width, background-color;
-moz-transition-property:width, background-color;
-ms-transition-property:width, background-color;
-o-transition-property:width, background-color;
transition-property:width, background-color;
}
.progressbar-title {
position:absolute;
top:0;
left:0;
width:250px;
font-weight:600;
font-size:18px;
color:#ffffff;
background:#0000ff / #00f;
-webkit-border-top-left-radius:3px;
-webkit-border-bottom-left-radius:4px;
-moz-border-radius-topleft:3px;
-moz-border-radius-bottomleft:3px;
border-top-left-radius:3px;
border-bottom-left-radius:3px;
}
.progressbar-title span {
display:block;
background:rgba(0, 0, 0, 0.1);
padding:0 20px;
height:35px;
line-height:35px;
-webkit-border-top-left-radius:3px;
-webkit-border-bottom-left-radius:3px;
-moz-border-radius-topleft:3px;
-moz-border-radius-bottomleft:3px;
border-top-left-radius:3px;
border-bottom-left-radius:3px;
}
.progressbar-bar {
height:35px;
width:0px;
background:#6adcfa;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
.progress-bar-percent {
position:absolute;
right:10px;
top:0;
font-size:15px;
height:35px;
line-height:35px;
color:#ffffff;
'color:rgba(0, 0, 0, 0.4);
}
</style>

---------------------------------------------------------------------------------------------------------
Bei Erstellen der Seiten:

Ränder
Aussenrand 4 x 0        Innenabstand 4 x 0

Ich möchte mein Versehen entschuldigen.

Mehr lesen
Gepostet am von René W.
Incomedia
Elisa B.
Incomedia

Guten Tag Armin!

Ich habe Ihnen hier geantwortet: https://helpcenter.websitex5.com/de/post/220687

Bitte öffnen Sie nur einen Post per Frage: Es ist besser für Sie, den so müssen Sie weniger Posts folgen, und auch für die helpcenter.websitex5.com Community da diese die interne Suchmaschine bessere benutzen kann.

Danke! Mit freundlichen Grüßen.

Mehr lesen
Gepostet am von Elisa B.