Reihenfolge der zu ladenen images

Status
Nicht offen für weitere Antworten.
I

IEN

Mitglied
hallo

mal eine super simple frage:

wenn sich eine große html seite aufbaut, kann man am bildschirm oft
mitverfolgen, wie die einzelnen bilder geladen werden (nach und nach
sind einzelne Fragmente zu sehen)

Werden die images in einer zufälligen reihenfolge geladen, oder
alphabetisch absteigend?

somit könnte man nämlich einfluss auf den ladenvorgang nehmen. ich finde
es immer sehr schade, wenn bei tollen seiten, der aha-effekt zerstört
wird, weil einzelne image-fragmente erst nach-und-nach sichtbar werden.

ien
 
Hallo,

ich schätze die Bilder werden in der Reihenfolge geladen, wie sie im Quelltext auftauchen, jedoch werden kleinere Images schneller geladen und sind deshalb eher sichtbar. Um den AHA Effekt zu behalten, würde ich einen ImagePreloader davorsetzten...

bye
 
Original geschrieben von crono
Hallo,

Um den AHA Effekt zu behalten, würde ich einen ImagePreloader davorsetzten...

bye
Zum Vergrößern anklicken....

Ich schon wieder Andreas! :(
Und wie funktioniert ein ImagePreloader?

Liebe Grüße
Gabi
 
Hallo Gabi :)

Ich verwende immer meinen StandardLoader - der ist extremst einfach gebaut, aber das macht ja nix. Das Skript ist ungefähr so aufgbaut:
1) Ein Layer mit 100% höhe / 100% breite wird über die Startseite gelegt.
2) in diesem Layer werden alle Images der Seite geladen
3) Wenn alles geladen sind wird der Layer auf "unsichtbar" geschaltet.

als Code sieht das dann so aus:
PHP: 
<head>
<script type="text/javascript">
function preloader() {
    document.getElementById('hidepage').style.visibility = 'hidden';
}
</script>
</head>
<body onLoad="preloader()">
<div id="hidepage" style="position: absolute; z-index:1; left:0px; top:0px; width:100%; height:100%; background-color: #ffffff;">
<table height="100%" width="100%" align="center">
  <tr>
    <td valign="middle" align="center">
        Pics loading ... Please wait<br><br><br>
        <img src="photos/clock.gif"><br><br><br>
        <span style="background-image:url('photos/1.jpg'); height:1px; width:1px;">&nbsp;</span>"
        <span style="background-image:url('photos/2.jpg'); height:1px; width:1px;">&nbsp;</span>"
        <span style="background-image:url('photos/3.jpg'); height:1px; width:1px;">&nbsp;</span>"
<!-- Hier folgen alle restlichen Bilder//-->
    </td>
   </tr>
</table>
</div>

// hier folgt der restliche Inhalt der Seite...
wie gesagt, es ist eine sehr sehr einfache Version, welche bestimmt noch viel ausgebaut werden kann - z.b. mit %-Anzeige usw... Da das Skript so einfach aufgebaut ist, eignet es sich auch hervorragend, wenn die Pics dynamisch via PHP eingefüht werden müssen...

ciao
 
Hab für euch auf die Schnelle einen Preloader geschrieben.

Vorschau: http://daxis.de/tutorials.de/laden.html
Zum Download: http://daxis.de/tutorials.de/laden.rar

PS. Im Preload-Script ist folgendes definiert:
Bild1: 1.jpg
Bild2: 2.jpg
Bild3: 3.jpg
alle sind nicht verfügbar.
Weiterleitung: http://daxis.de/
Maximale Ladezeit: 10 Sekunden
Nach 30 Sekunden kommt dann eine Alert-Meldung und du wirst zur Weiterleitungsseite umgeleitet.

Wenn ihr es einsetzen solltet, schreibt mir bitte eine E-Mail oder eine PM und setzte einen Link auf meine Homepage.
Wäre sehr nett von euch.
Dann werde ich das Script demnächst auch noch ausbauen.
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück