Hallo zusammen. Erstelle mir im Moment ein Website mit dem WD 11 Premium. Ist es möglich ein Ladesymbol anzeigen zu lassen bis bestimmte Objekte (oder die ganze Seite) im Hintergrund vollständig geladen sind?
Kann leider (im Zusammenhang mit dem Magix Web Designer) hierzu nichts finden...
Der WD kann das zwar nicht über eine der eingebauten Optionen realisieren, Du kannst die Funktion aber nachrüsten, wenn Du eins der zahlreichen Angebote nutzt, die es im WWW gibt.
Hier findest Du z. B. eine Lösung, die relativ leicht zu implementieren ist. Noch mehr Angebote zu dem Thema listet Dir jede Suchmaschine...
Viel Erfolg
Danke für die Antwort BeRo. Da fängt das erste Problem aber schon an... hab nun folgenden Code:
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
z-index: 2000;
position: fixed;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 5px;
width: 200px;
background: #fff;
border: 1px solid #29d;
overflow: hidden;
}
.pace .pace-progress {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
max-width: 200px;
position: fixed;
z-index: 2000;
display: block;
position: absolute;
top: 0;
right: 100%;
height: 100%;
width: 100%;
background: #29d;
}
.pace.pace-inactive {
display: none;
}
Schaffe/Versteh aber nicht wo ich den einfügen muss damit das Ganze auch funktioniert? Habe es über Webeigenschaften/Website/Head als auch Webeigenschaften/Site/Head probiert - läuft aber nicht...? Habe leider keinerlei Programmier-Erfahrung...
Woher hast du diesen CSS-Code-Schnippsel?
Er ist nur Teil des Ganzen ...
[...] Da fängt das erste Problem aber schon an [...]
Du machst Dir Probleme, wo keine sind...
Mit den Scripts, die in den Codeteilen des Tools angelegt sind, hast Du normalerweise nichts zu tun. Du musst die entsprechenden Dateien nur in Deiner Site referenzieren. Mehr nicht!
Lade Dir mal hier die Kurzanleitung- und die (ZIP) Archivdatei mit allen Scripts und Dokus herunter:
In der Kurzanleitung (Abschnitt "Example") ist deutlich beschrieben, dass Du nur 2 Zeilen HTML Code im HTML Head Deiner Site einbauen musst.
Für eine Site, die mit dem WD erstellt wurde, kann das so aussehen:
-------------------------------
<script src="./index_htm_files/pace.js"></script>
<link href="./index_htm_files/pace-theme-flat-top.css" rel="stylesheet" />
------------------------------
Wenn Du jetzt noch dafür sorgst, dass die mit der ZIP Datei heruntergeladenen und im Code referenzierten Dateien "pace.js" und "pace-theme-flat-top.css" im Verzeichnis "index_htm_files" zu finden sind wenn der Browser eine der Seiten öffnet, dann hast Du Deine Progress Bar erfolgreich eingebaut!
So schwer war's nicht, oder?
Einen Nachteil hat die oben geschilderte Vorgehensweise:
Bei jeder Änderung der an der Site überschreibt der WD das Verzeichnis "index_htm_files" und damit gehen die beiden Dateien "pace.js" und "pace-theme-flat-top.css" verloren. Sie müssen also nach jeder Änderung erneut, manuell in das Verzeichnis kopiert werden.
Besser ist es, die beiden Dateien in dem zum Projekt gehörenden Hilfsverzeichnis anzulegen. Dann sorgt der WD automatisch dafür, dass sie beim Export- und bei der Veröffentlichung im Verzeichnis "index_htm_files" landen.
Wie ein solches Hilfsverzeichnis angelegt wird, dass findest Du in der Hilfe und in zahlreichen Beiträgen hier im Forum, z. B. hier oder hier...
Viel Erfolg
Danke erstmal für die Hilfe! Bin leider ein paar Tage weg... werde mich danach gleich an die Arbeit machen.
Also der Tip mit Pace funktioniert fast perfekt...
Installiert habe ich es über/mit eager. Jetzt hab ich aber das Problem dass bei Größenänderungen (während des betrachten im Browser) Pace neu zu laden scheint und der Bildschirm bleibt weiß... ebenso ist ein Teil der Website als Seiteneffekt-Website exportiert - hier dass beim Seitenwechsel das gleiche Spiel.
Da ich bei Pace nur die gesamte Adresse der Website angeben kann ist die Frage ob ich den Effekt (evtl. per Skript) direkt im WD für bestimmte Seiten unterdrücken kann bzw Pace daran hindern kann neu zu laden (bei Größenänderungen z.B.)?
Danke für die Mühe...
[...] ebenso ist ein Teil der Website als Seiteneffekt-Website exportiert [...]
Wie geht das?
AFAIK kann der WD eine Site (1 Projektdatei) nur entweder als "normale Website" exportieren/uploaden oder als Seiteneffekt Website. Die Mischung beider Möglichkeiten in einem Export/Upload geht nicht!
[...] Installiert habe ich es über/mit eager [...]
Den mit der "eager" Methode erzeugten Code habe ich mir nicht angesehen, weil das Einbinden der 2 Scriptzeilen in den HTML Head einer Seite/Site
-------------------------------
<script src="./index_htm_files/pace.js"></script>
<link href="./index_htm_files/pace-theme-flat-top.css" rel="stylesheet" />
------------------------------
so einfach ist, dass IMHO dazu kein Tool nötig ist.
[...] ob ich den Effekt (evtl. per Skript) direkt im WD für bestimmte Seiten unterdrücken kann [...]
Ja, das geht. Allerdings nur, wenn Du für den Export/Upload auf die Seiteneffekte verzichtest.
In dem Fall kopierst Du die beiden u. a. Zeilen Scriptcode einfach nur in den HTML Head der Seiten (nicht der Website!), die Du mit dem Effekt anzeigen möchtest.
[...] dass bei Größenänderungen (während des betrachten im Browser) Pace neu zu laden scheint und der Bildschirm bleibt weiß [...]
Das sollte eigentlich nicht passieren. Der WD generiert aber einen etwas eigenwilligen Code für die Steuerung der Anzeige der Varianten (Desktop/mobil). Da wird tatsächlich bei einer Änderung der Breite des Browserfensters die Seite neu geladen und damit der Scriptcode für die Seite erneut gestartet. Ist nun gleichzeitig die Option "Seiteneffekte" aktiviert, kann es zu Kollisionen mit einem manuell eingebundenen Scriptcode kommen.
Die Ursache zu analysieren und den entsprechenden Code anzupassen fällt aber eindeutig in den Bereich Softwareentwicklung, was nicht unbedingt Sache der User ist...
Vielleicht kannst Du mit den o. a. Tipps eine für Dich passende Lösung finden. Ich drücke Dir mal die Daumen.
Viel Erfolg und einen schönen Rest vom WE
Danke nochmal/erstmal...
[...] ebenso ist ein Teil der Website als Seiteneffekt-Website exportiert [...]
Wie geht das?
AFAIK kann der WD eine Site (1 Projektdatei) nur entweder als "normale Website" exportieren/uploaden oder als Seiteneffekt Website. Die Mischung beider Möglichkeiten in einem Export/Upload geht nicht!
Habe 2 Projekte erstellt - 1. als "Seiteneffekt" (Index) und das 2. normal und dazu hochgeladen... wollte den Seiteneffekt nur für ein "Startportal" den Rest der Seite aber normal...
Eager hab ich jetzt mal weggelassen und es nach BeRos' Tip erstellt - habs hinbekommen allerdings wieder mit einem kleinen Haken... Gleichzeitig ist die Progress-Bar als auch der "Aufbau der Seite" zu sehen, was nicht allzu prickelnd wirkt... über die Eager-Methode gibt es die Option ausschließlich die Progress-Bar anzeigen zu lassen (auf blankem/weißem Hintergrund) bis die Seite komplett geladen ist... gibt es eine Möglichkeit dies ebenfalls zu "aktivieren"?
Habe versucht über deine verlinkte Kurzanleitung einen Ansatz zu finden, leider erfolglos..
[...] über die Eager-Methode gibt es die Option ausschließlich die Progress-Bar anzeigen zu lassen [...] gibt es eine Möglichkeit dies ebenfalls zu "aktivieren"? [...]
Ja, sicher, allerdings erfordert das ein intensives "Studium" der mitgelieferten JS Bibliothek, um die notwendigen Änderungen vornehmen zu können.
Hier findest Du eine Einstiegsseite mit diversen Links zu weiterführenden Sites, auf denen der JS Code detailliert erklärt wird (klick).
Die meisten Infos sind aber auch schon in dem ZIP Archiv enthalten, das Du (hoffentlich) von der PACE Site heruntergeladen hast.
Wenn Du die Standard Version der Progress Bar verändern willst, ist es aber einfacher, wenn Du Dich bei EAGER anmeldest und eine (dummy) Site anlegst.
Den zu dieser Site gehörenden "embed code" kannst Du kopieren und in beliebig vielen Deiner Sites einbauen. Er gehört in den HTML Head der Seiten, die die Progress Bar zeigen sollen.
Das ist der Beispielcode, den ich für die online Demo angelegt habe:
-----------------------------
<script src="//fast.eager.io/1o6YP4Ck5X.js"></script>
-----------------------------
Das Verhalten der davon abhängigen Progress Bar kann jederzeit auf der EAGER Site verändert werden, ohne dass Du Deine Website verändern müsstest.
Für die Demo habe ich eingestellt, dass die Progress Bar ("pace-theme-center-atom.tmpl.css") auf einer weißen Seite gezeigt wird, während im Hintergrund die aufgerufene Website geladen wird...
Das sollte leicht nachzubauen sein.
Viel Erfolg