Antworten zum Thema „Seite erst anzeigen, wenn Grafiken fertig geladen“

KayTeEn · 03.10.2008

Hallo,
ich bin dabei mir eine eigene Website zu basteln.
Hab vor einigen Wochen begonnen HTML zu wiederholen,
mir die CSS Grundlagen anzusehen und mich etwas
mit PHP als erste Skript-Sprache zu beschäftigen.
(Hatte bisher nur Delphi & Java programmiert)

Hab nun die Grundstruktur der Seite aufgebaut und
in PS das Design zusammengeschustert und gesliced.
Die 200K scheinen jedoch schon zu viel zu sein, schließlich
braucht die Seite manchmal so ne Sekunde,
bis alle Bilder geladen sind.

Gibts eine Möglichkeit mit Hilfe von PHP (oder gar HTML)
die Seite erst dann anzuzeigen, wenn alle Bilder geladen sind,
um das verzögerte Aufbauen einzelner Bilder zu verstecken?

EDIT:
Habe bisher Lösungen mit JavaScript gesehen, bei denen das Problem
durch Vorladen der Grafiken in einer "Lade-Seite" realisiert wird.
Vielleicht ist das auch in PHP möglich?

Schonmal großes Dankeschön im Voraus
für eure Lösungsvorschläge!

Kay

Weichzeichner · 03.10.2008

AW: Seite erst anzeigen, wenn Grafiken fertig geladen

Das JavaScript kannst du doch auch in php einbauen, oder irre ich mich da?!

Ansonsten sollte das wohl helfen (funktioniert auf jeden Fall in einer html, ob das in einer php funtioniert weiß ich nicht.)

Code:

<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>

Das ganze dann auf die Grafiken anwenden.

KayTeEn · 03.10.2008

AW: Seite erst anzeigen, wenn Grafiken fertig geladen

Hmmm, ist für mich noch nich so ganz nachvollziehbar.
Könntest du das etwas kommentieren?

KayTeEn · 03.10.2008

AW: Seite erst anzeigen, wenn Grafiken fertig geladen

EDIT: sorry double post

KayTeEn · 03.10.2008

AW: Seite erst anzeigen, wenn Grafiken fertig geladen

Code:

function MM_preloadImages() {  
  var d=document;                      
  if(d.images){                                 // wenn die Seite Bilder enthält ...
    if(!d.MM_p) d.MM_p=new Array();   // wenn noch kein MM_p existiert, erstelle neues Array    
    var i;
    var j=d.MM_p.length;                    // Anzahl zu ladender Bilder
    a=[B]MM_preloadImages[/B].arguments;    // [B]die Zeile is mir schleierhaft[/B]
    for(i=0; i<a.length; i++) 
       if (a[i].indexOf("#")!=0){             // bei welchem Idnex sollte der Wert "#" auftauchen?
        d.MM_p[j]=new Image;              // hier wird das array mit den Bild-Objekten gefüllt
        d.MM_p[j++].src=a[i];               // weist die Bildquellen zu
      }
    }
}

Ich kann mir die markierte Zeile nicht erklären.
Ist das denn ein rekursiver Selbstaufruf der Funktion???
Ergibt aber auch keinen Sinn.

Wie lässt sich MM_preloadImages in Zeile 7 deuten?
Würde mich freuen wenn mir da jemand helfen kann.

Weichzeichner · 03.10.2008

AW: Seite erst anzeigen, wenn Grafiken fertig geladen

Wie das jetzt genau funktioniert kann ich dir auch nicht sagen (ich bin nicht der codertyp), aber ich kann dir sagen: Es funktioniert!

Zu der #: Gemeint ist mit index wohl die Datei selber. Das Script habe ich aus einer html mit dem namen 'Index.html'.
Zu deiner Zeile: Wenn ich raten müsste, würde ich sagen, dass die Funktion irgendwelche Dinge für die Funktion selbst bestimmt, die arguments. Aber so viel Ahnung habe ich leider nicht davon sry :uhm:

Duddle · 03.10.2008

AW: Seite erst anzeigen, wenn Grafiken fertig geladen

KayTeEn schrieb:
Schonmal großes Dankeschön im Voraus
für eure Lösungsvorschläge!

Umso mehr du auf die Seite packst, umso länger dauert es sie zu laden.
Wenn es dich so ungeheuer stört, dass das Design etwas springt bis es fertig ist, dann solltest du möglicherweise die andere Richtung versuchen: die Seite kleiner machen.

Heisst konkret: die Bilder besser komprimieren, die Anzahl der HTTP-Requests verringern (weniger, aber größer dimensionierte Bilder), mögliche CSS- und JS-Dateien komprimieren (da gibt es Online-Tools), die Seite selbst komprimiert ausliefern (mod_deflate, falls du Apache nutzt). Ein Faktor kann natürlich auch der HTML-Code selber sein, eine Seite mit Tabellenlayout (lese ich aus "mit PS gesliced") ist meiner Erfahrung nach grundsätzlich größer als eine, die Code und Layout mit CSS trennt.

Duddle

blackout · 03.10.2008

AW: Seite erst anzeigen, wenn Grafiken fertig geladen

1. Das Problem hat mit PHP nichts zu tun. Der Client bekommt kein PHP, sondern stinknormales HTML vom Server geliefert. HTML wiederrum kann nicht seine eigene Darstellung beeinflussen, das ist in etwa so wie wenn ein Autor will, dass der Leser erst alle Seiten seines Buches anfasst, bevor der Text erscheint.
2. Den Seitenaufbau zu verzögern ist Blödsinn und nervt die Benutzer nur. Typischer Fall des "Der Benutzer hat zu machen was ich will"-Webmastersyndroms und, neben der Sicherheit, größter Grund für den Verruf von JavaScript.
3. Man kann kein JavaScript in PHP einbauen. JavaScript läuft daheim auf dem Computer des Anwenders, PHP auf einem Server in Timbuktu. Die beiden haben rein gar nichts miteinander zu tun. (Bevor jetzt jemand mit XmlHttpRequest kommt: das ist eine neue Verbindung und technisch genau das gleiche wie ein normaler Seitenaufbau)

4. Wie groß das HTML ist ist ziemlich wurscht, diese Forenseite ist vollgestopft mit schlechtem Code, Tabellen und was weiß ich, und kommt auf etwas über 30 KiB - und so groß ist (m)ein Avatar schon fast alleine. Graphiken stechen den Hypertext immer um Längen aus.
5. Kein Design sprengt eine Seite beim Laden, es tut das bestenfalls in bestimmten Browsern. Wie und wann wer was rendert ist dem Benutzer überlassen. FF3 lässt z.B. gerne mal das Stylesheet warten und zeigt nur das (ziemlich unschöne) Standard-HTML des Browsers; bei Opera sieht das ganz anders aus.

KayTeEn · 04.10.2008

AW: Seite erst anzeigen, wenn Grafiken fertig geladen

@ Duddle:
Ich bin folgendemaßen vorgegangen:

Ich hab die Seite durch <DIV> und <SPAN> Tags strukturiert und diesen
dann per CSS die Attribute (Maße, Abstände, ...) zugewiesen.

So wie ich die Seite per <DIV> bzw. <SPAN> unterteilt habe,
habe ich dann in PS entsprechend die Hilfslinien gezogen und
an diesen gesliced. Somit sind 26 Einzelgrafiken mit durchschnittlich
8Kb entstanden. Diese habe ich dann (per CSS) als Hintergrundgrafiken
der <DIV> / <SPAN> Tags definiert und somit quasi alles wieder zusammengefügt.

Wo ich das hier so schildere, überkommt mich die traurige Vermutung,
dass das wohl scheinbar kein sonderlich gebräuchliches Verfahren ist.
Hab ich da völligen Mist gebaut?

Die ausgelagerte CSS-Datei liegt bei 3 KB.
Ich bezweifle dass der HTML oder CSS Code die Anzeige verzögern.

@ blackout:

1.das war mir bewusst, aber danke.
2. das sehe ich ein, da hast du wohl Recht.
3. verstanden

4. ich habe 26 Einzelgrafiken mit durchschnittlich 8Kb. Ist das denn zu viel?
Wenn ich die Grafiken noch weiter reduziere, erhalte ich Pixelrauschen.
5. Immer dieser Feuerfuchs ...

Ich danke euch für eure Bemühungen!
Werd mich auf jeden Fall erstmal n bisschen mit PHP an sich beschäftigen.
Grafiken sind schließlich Beiwerk, Funktionalität und Inhalt sind entscheidend.

Mich wundert nur, dass mir das bei anderen Websites nicht so auffällt,
dass bestimmte Teile des Hintergrunds erst nachgeladen werden müssen.
Da erscheint eben alles gleichzeitig, wenn auch etwas verzögert.

EDIT:
Ich hab mal was anderes versucht, was wohl etwas sinnvoller ist.
Ich hab das Design als einzelnes JPG abgespeichert und im Hüllen-DIV als bg definiert.
Die DIV Aufteilung nutz ich jetzt nur noch für die Texte und Buttons,
die einfach drübergelegt werden. Da es nur ein Bild ist, lädt es natürlich auch den gesamten
Hintergrund gleichzeitig und (ganz wichtig) ohne Verzögerung.

blackout · 04.10.2008

AW: Seite erst anzeigen, wenn Grafiken fertig geladen

Naja, wie schnell oder langsam der Hintergrund kommt, hängt wohl von der Graphikgröße an. Wenn du mich fragst spricht nichts gegen eine Seite von 500 KiB, schließlich haben mittlerweile alle DSL; an der Stelle kommt immer gern jemand und behauptet ohne Quellenangabe, dass es noch viele 56k-Benutzer gibt, von daher hier meine qualifizierte Antwort: Nein, gibt es nicht. Auch ohne Quellenangabe.

Duddle · 04.10.2008

AW: Seite erst anzeigen, wenn Grafiken fertig geladen

Diese Seite hat mir damals beim verkleinern meiner Homepage geholfen: Web Page Analyzer - free website optimization tool website speed test check website performance report from web site optimization
Das kannst du ja auch mal bei dir drüberlaufen lassen, ganz unten stehen dann auch ein paar Tipps zur Optimierung.

Duddle

KayTeEn · 04.10.2008

AW: Seite erst anzeigen, wenn Grafiken fertig geladen

Alles klar, danke euch...

CIX88 · 05.10.2008

AW: Seite erst anzeigen, wenn Grafiken fertig geladen

Vielleicht wäre es eine Überlegung wert, darauf ganz zu verzichten.
Wenn ich eine Website besuche, wo ich ewig nur eine weiße Seite sehe, dann klicke ich das Teil wieder weg. Aber wenn ich sehe, dass erste Inhalte sich schon aufbauen, und die Seite noch nicht komplett ist, dann warte ich auch. Und bei diesem Verhalten bin ich nicht der einzigste

PS:
Es gibt wirklich noch 56k- und ISDN-Benutzer. Das sind leider Benutzer die auf Dörfer wohnen, wo große Firmen kein Geld für neue Kabel ausgeben wollen

20km von mir gibt es solche Leute.