Anzeige

Seite erst anzeigen, wenn Grafiken fertig geladen

Seite erst anzeigen, wenn Grafiken fertig geladen | PSD-Tutorials.de

Erstellt von KayTeEn, 03.10.2008.

  1. KayTeEn

    KayTeEn ziemlicher Noob

    Dabei seit:
    07.12.2007
    Beiträge:
    76
    Geschlecht:
    männlich
    Software:
    Photoshop, Cinema 4D
    Seite erst anzeigen, wenn Grafiken fertig geladen
    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
     
    #1      
  2. Weichzeichner

    Weichzeichner Alles muss funktionieren.

    221
    Dabei seit:
    28.06.2007
    Beiträge:
    2.166
    Geschlecht:
    männlich
    Ort:
    Hannover
    Software:
    Stift & Papier.
    Kameratyp:
    Auge.
    Seite erst anzeigen, wenn Grafiken fertig geladen
    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 (Text):
    1.  
    2. <script type="text/JavaScript">
    3. <!--
    4. function MM_preloadImages() { //v3.0
    5.   var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    6.     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    7.     if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    8. }
    9. //-->
    10. </script>
    11.  
    Das ganze dann auf die Grafiken anwenden.
     
    #2      
  3. KayTeEn

    KayTeEn ziemlicher Noob

    Dabei seit:
    07.12.2007
    Beiträge:
    76
    Geschlecht:
    männlich
    Software:
    Photoshop, Cinema 4D
    Seite erst anzeigen, wenn Grafiken fertig geladen
    AW: Seite erst anzeigen, wenn Grafiken fertig geladen

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

    KayTeEn ziemlicher Noob

    Dabei seit:
    07.12.2007
    Beiträge:
    76
    Geschlecht:
    männlich
    Software:
    Photoshop, Cinema 4D
    Seite erst anzeigen, wenn Grafiken fertig geladen
    AW: Seite erst anzeigen, wenn Grafiken fertig geladen

    EDIT: sorry double post
     
    Zuletzt bearbeitet: 03.10.2008
    #4      
  5. KayTeEn

    KayTeEn ziemlicher Noob

    Dabei seit:
    07.12.2007
    Beiträge:
    76
    Geschlecht:
    männlich
    Software:
    Photoshop, Cinema 4D
    Seite erst anzeigen, wenn Grafiken fertig geladen
    AW: Seite erst anzeigen, wenn Grafiken fertig geladen

    Code (Text):
    1.  
    2.  
    3. function MM_preloadImages() {  
    4.   var d=document;                      
    5.   if(d.images){                                 // wenn die Seite Bilder enthält ...
    6.     if(!d.MM_p) d.MM_p=new Array();   // wenn noch kein MM_p existiert, erstelle neues Array    
    7.     var i;
    8.     var j=d.MM_p.length;                    // Anzahl zu ladender Bilder
    9.     a=[B]MM_preloadImages[/B].arguments;    // [B]die Zeile is mir schleierhaft[/B]
    10.     for(i=0; i<a.length; i++)
    11.        if (a[i].indexOf("#")!=0){             // bei welchem Idnex sollte der Wert "#" auftauchen?
    12.         d.MM_p[j]=new Image;              // hier wird das array mit den Bild-Objekten gefüllt
    13.         d.MM_p[j++].src=a[i];               // weist die Bildquellen zu
    14.       }
    15.     }
    16. }
    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.
     
    Zuletzt bearbeitet: 03.10.2008
    #5      
  6. Weichzeichner

    Weichzeichner Alles muss funktionieren.

    221
    Dabei seit:
    28.06.2007
    Beiträge:
    2.166
    Geschlecht:
    männlich
    Ort:
    Hannover
    Software:
    Stift & Papier.
    Kameratyp:
    Auge.
    Seite erst anzeigen, wenn Grafiken fertig geladen
    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:
     
    #6      
  7. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.864
    Geschlecht:
    männlich
    Ort:
    Dresden
    Seite erst anzeigen, wenn Grafiken fertig geladen
    AW: Seite erst anzeigen, wenn Grafiken fertig geladen

    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
     
    #7      
  8. blackout

    blackout Schaf im Wolfspelz

    Dabei seit:
    12.09.2005
    Beiträge:
    3.359
    Geschlecht:
    männlich
    Ort:
    Würzburg
    Kameratyp:
    Rollei 35 S
    Seite erst anzeigen, wenn Grafiken fertig geladen
    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.
     
    Zuletzt bearbeitet: 03.10.2008
    #8      
  9. KayTeEn

    KayTeEn ziemlicher Noob

    Dabei seit:
    07.12.2007
    Beiträge:
    76
    Geschlecht:
    männlich
    Software:
    Photoshop, Cinema 4D
    Seite erst anzeigen, wenn Grafiken fertig geladen
    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 :D
    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.
     
    Zuletzt bearbeitet: 04.10.2008
    #9      
  10. blackout

    blackout Schaf im Wolfspelz

    Dabei seit:
    12.09.2005
    Beiträge:
    3.359
    Geschlecht:
    männlich
    Ort:
    Würzburg
    Kameratyp:
    Rollei 35 S
    Seite erst anzeigen, wenn Grafiken fertig geladen
    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.
     
    #10      
  11. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.864
    Geschlecht:
    männlich
    Ort:
    Dresden
    Seite erst anzeigen, wenn Grafiken fertig geladen
    #11      
  12. KayTeEn

    KayTeEn ziemlicher Noob

    Dabei seit:
    07.12.2007
    Beiträge:
    76
    Geschlecht:
    männlich
    Software:
    Photoshop, Cinema 4D
    Seite erst anzeigen, wenn Grafiken fertig geladen
    AW: Seite erst anzeigen, wenn Grafiken fertig geladen

    Alles klar, danke euch...
     
    #12      
  13. CIX88

    CIX88 Aktives Mitglied

    Dabei seit:
    06.04.2006
    Beiträge:
    814
    Geschlecht:
    männlich
    Ort:
    GR
    Seite erst anzeigen, wenn Grafiken fertig geladen
    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.
     
    #13      
x
×
×
teststefan