Suche nach dem perfekten Effekt

Alles, was PHP betrifft, kann hier besprochen werden.

Suche nach dem perfekten Effekt

Postby Makconner » 13. June 2006 13:34

Ich habe einen Effekt gefunden den ist sehr gut finde. Die Seite wird erst geladen und danach mit einer Überblendung angezeigt. Das find ich spitze…. Könnt ihr mir helfen so was zu finden? Wo finde ich das?

Frage zu den Nebeneffekten: wirkt sich das auf dem Server nachteilig aus, wenn ich so was einbaue?
User avatar
Makconner
 
Posts: 153
Joined: 14. February 2006 16:00

Postby deepsurfer » 13. June 2006 15:16

Stichwort "PreLoader".

Soweit ich mich erinner war das über JAVA-Applets realisiert. (kann mich aber jetzt auch irren, ist zu lang her)

Frage zu den Nebeneffekten: wirkt sich das auf dem Server nachteilig aus, wenn ich so was einbaue?

Kommt auf das gesamt konzept deiner Page an... Wenns passt ist es ok..
chirio Deep
Wie sagte einst der MCP aus Tron auf dem Bildschirm zu schreiben Pflegte
" ... end of communication ... "
User avatar
deepsurfer
AF Moderator
 
Posts: 6440
Joined: 23. November 2004 10:44
Location: Cologne
Operating System: Win-XP / Win7 / Linux -Debian

Postby DaPhil » 13. June 2006 19:13

Wenn du Bilder vorladen möchtest hab ich hier was für dich, ist aber mit JavaScript realisiert, also für User ohne JavaScript nicht geeignet, aber wenn das nicht stört, hier der Code! (Kann sein das man damit auch anderweitige Dateien vorladen kann, hab ich aber noch nicht ausprobiert, aber sag mir bescheid wenn du es ausprobiert hast.!

<script language="JavaScript">
var locationAfterPreload="index.php?section=galerie"
var lengthOfPreloadBar=400
var heightOfPreloadBar=10

var yourImages=new Array()
yourImages[0]="images/galerie/01.jpg"
yourImages[1]="images/galerie/02.jpg"
yourImages[2]="images/galerie/03.jpg"


if(document.images) {
var dots=new Array()
dots[0]=new Image(1,1)
dots[0].src="images/loading.jpg"
dots[1]=new Image(1,1)
dots[1].src="images/loaded.jpg"
var preImages=new Array(),coverage=Math.floor(lengthOfPreloadBar/yourImages.length),currCount=0
var loaded=new Array(),i,covered,timerID
var leftOverWidth=lengthOfPreloadBar%coverage
}

function loadImages() {
for(i=0; i<yourImages.length; i++) {
preImages[i]=new Image()
preImages[i].src=yourImages[i]
}
for(i=0; i<preImages.length; i++) {
loaded[i] = false
}
checkLoad()
}

function checkLoad() {
if(currCount==preImages.length) {
location.replace(locationAfterPreload)
return
}
for (i=0; i<=preImages.length; i++) {
if (loaded[i]==false && preImages[i].complete) {
loaded[i]=true
eval("document.img" + currCount + ".src=dots[1].src")
currCount++
}
}
timerID=setTimeout("checkLoad()", 10)
}
</script>

Neue Bilder hinzufügen mit yourImages[]="images/galerie/03.jpg". (Hier muss nicht unbedingt ein Argument in die eckigen Klammern, kannst du auch einfach nix reinschreiben...)

Aufrufen tust du es folgendermaßen:

<script language="JavaScript">
if(document.images) {
var preloadBar=''
for(i=0; i<yourImages.length-1; i++) {
preloadBar+='<img src="' + dots[0].src + '" class="preload" width="' + coverage + '" height="' + heightOfPreloadBar + '" name="img' + i + '" align="absmiddle">'
}
preloadBar+='<img src="' + dots[0].src + '" class="preload" width="' + (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" name="img' + (yourImages.length-1) + '" align="absmiddle">'
document.write(preloadBar)
loadImages()
}
</script>

Auch hier musst du nicht unbedingt eine Klasse bestimmen für die kleinen Preloadbildchen, die du dir selbst machen musst. (Einfach ein kleines Bild mit Hintergrundfarbe...)

So müsste es funktionieren!
DaPhil
 
Posts: 21
Joined: 29. August 2005 11:10
Location: Marburg


Return to PHP

Who is online

Users browsing this forum: No registered users and 24 guests