onload Script für Preloading
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
all
anzeige
blocken
code
dank
datei
display
effekt
ergebnis
geschrieben url
http
lade
laden
papierkorb
sekunde
spielplatz
text
url
vergewaltigung
versuchen
-
Hallo,
ich versuche mein Problem zu erklären.
Ich verwende auf meiner Seite Hintergrundgeräusche im swf-Format.
Damit diese sofort zur Verfügung stehen, lade ich sie auf der Startseite vor.
Eine Textmeldung mit evtl. einem anim.Gif soll darauf hinweisen, dass geladen wird.
Nach Abschluss des Ladevorgangs, soll die Meldung verschwinden und ein Textlink mit "Weiter erscheinen".
Nach langer Suche, habe ich ein Script gefunden, das mir ein "Bitte warten" einblendet.
Dieses Script habe ich allerdings "vergewaltigt" und aus seinem Rahmen gerissen, jedoch gefällt mir diese Darstellung.
Das animierte Gif kann ich allerdings vergessen, weil es offenbar erst viel zu spät geladen wird.
Und den "Weiter"-Link...
Zu meiner Seite: http://gerald-grinschgl.lima-city.de/
Das verwendete Script:
function bitteWarten() { zeigeHinweis(); aktiv = window.setInterval('weiterGehts()',4000); } function zeigeHinweis() { var anzeige = document.getElementById('bittewarten'); var x,y; if (self.pageYOffset) // all except Explorer { x = self.pageXOffset; y = self.pageYOffset; } else if (document.documentElement && document.documentElement.scrollTop) { x = document.documentElement.scrollLeft; y = document.documentElement.scrollTop; } else if (document.body) // all other Explorers { x = document.body.scrollLeft; y = document.body.scrollTop; } anzeige.style.display='block'; anzeige.style.top =( y + 100) + 'px'; } function weiterGehts() { document.getElementById('bittewarten').style.display='none'; window.clearInterval(aktiv); } function aendereLinks () { var links = document.getElementsByTagName('a'); var b = document.getElementById('bittewarten'); if ( b.attachEvent ) { b.attachEvent('onclick',weiterGehts); } for(var i = 0; i < links.length; i++) { var l = links[i] if(l.target == '') { if( l.addEventListener ) { l.addEventListener('click',bitteWarten,false); } else if ( l.attachEvent ) { l.attachEvent('onmouseup',bitteWarten); } else { l.onclick = bitteWarten; } } } } var aktiv=''; window.onload = aendereLinks; window.onunload = weiterGehts;
Also, ich möchte die Meldung nicht in einem Layer oder Alert, sondern so wie sie derzeit auf der Seite erscheint.
Beim Code kann man doch sicher einige Zeilen löschen, aber welche?
Und wie komme ich zum "Weiter"- Link.
Ich will lernen, sei mein Lehrer.
Danke LG Gary
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Also es hat eine weile gedauert bis ich verstanden habe warum Dein code überhaupt funktioniert.
Bis ich auf Deiner Webseite im html-Quellcode das onload im<bod<> entdeckt habe ^^
Das Ergebnis Deiner "Vergewaltigung" hat mich aber schon amüsiert
Hier die gekürzte Version:
HTML
<body onload="document.getElementById('bittewarten').style.display='none';)" text="#FFFFFF" bgcolor="#993300" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
Thats's it.
Die Javascript-Datei lässt Du weg, Alles was Du brauchst ist im onload notiert.
Dir wird wahrscheinlich auffallen das die Ladezeit dadurch rapide beschleunigt wird (und zwar exakt 4 Sekunden schneller).
Im übrigen würde ich an Deiner Stelle den "Preloader" ganz weglassen weil Deine Sound-dateien einfach so klein sind das das kaum auffallen dürfte.
Zum Beispiel Traffic.mp3.swf hat 179kb , Dein Bild home.png hat 622kb.
Das ist nix.
Kurzerklärung meines geposteten Codes:
Verstecke das Element mit der id 'bittewarten' nachdem die Seite Komplett geladen wurde.
Da Du ja offensichtlich alle Sound-dateien mit der Seite lädst (sie aber nicht abspielst) hast Du damit ja den Gewünschten Preload-Effekt erreicht.
p.s.
Falls Du willst, erkläre ich auch was Dein Code bisher gemacht hat, wenn's aber unwichtig ist, erspare ich mir auch gerne die Tipperei.
Beitrag zuletzt geändert: 4.6.2011 10:32:31 von simuliertes -
simuliertes schrieb:
Also es hat eine weile gedauert bis ich verstanden habe warum Dein code überhaupt funktioniert.
Bis ich auf Deiner Webseite im html-Quellcode das onload im<bod<> entdeckt habe ^^
Das Ergebnis Deiner "Vergewaltigung" hat mich aber schon amüsiert
Hier die gekürzte Version:
HTML
<body onload="document.getElementById('bittewarten').style.display='none';)" text="#FFFFFF" bgcolor="#993300" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
Erstmal Danke und - nein, was der Code bisher machte ist zwar interessant aber zweitrangig.
Zu deiner gekürzten Version:
das Prinzip ist mir jetzt klar, auch wenn du ein eingebaut hast (...style.display='none';)" text="#FFFFFF"...)
Nun stellt sich mir noch die Frage wie ich den "Weiter" - Link erst einblende, wenn die Seite geladen ist.
Nach meinen Überlegungen müsste ich ein "document.getElementById('weiter') zuerst style.display='none'; ausblenden und gemeinsam mit body onload="document.getElementById('bittewarten') wieder einblenden "document.getElementById('weiter').style.display='block';
Warum das Ganze?
Ich bin selbst auf mobiles Internet angewiesen und betrachte die Seiten aus der Sicht mit wenig Bandbreite.
Dabei ergeben sich ohne Vorladen die aberwitzigsten Effekte.
Leider habe ich mich seit Amigabasic nicht sonderlich mit Programmiersprachen beschäftigt und somit keine echten Voraussetzungen, ein Skript nach meinen Wünschen zu schreiben. Ich versuche halt, Bestehendes dahin abzuwandeln, dass es für mein erklärte Ziel passen könnte.
Nur ich weiß, wieviele Pläne ich schon verworfen habe...
LG Gary -
Hab da mal was geschrieben:
Klickmich
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta name="generator" content="Webweaver v1.6.7 [http://webweaver.ws]" /> <style type="text/css" media="all"> /* Beim Start verbergen */ #weiterGehts {display: none;} </style> <script type="text/javascript"> function preloader() { /* bitteWarten verstecken */ document.getElementById('bitteWarten').style.display ='none'; /* weiterGehts anzeigen */ document.getElementById('weiterGehts').style.display ='block'; /*Falls Du keine Automatische Weiterleitung wünscht, einfach weiterleitung entfernen oder auskommentieren */ /* Automatische Weiterleitung nach 120 Sekunden */ /*(2 Minuten(120sek) sind natürlich zu viel...)*/ var weiterleitungURL= 'http://gerald-grinschgl.lima-city.de/starthere.htm'; var SekundenBisZurWeiterleitung= 120; var idDerSekundenanzeige= 'weiterleitung_sek'; weiterleitung(weiterleitungURL,SekundenBisZurWeiterleitung,idDerSekundenanzeige); } /* Es folgt die Funktion zur Automatischen Weiterleitung nach [sec] Sekunden */ function weiterleitung(site,sec,id) { /* Wenn [sec] gleich oder kleiner als 0, dann ändere die Url der Seite in [site] */ if (sec <= 0) { self.location.href = site; }else{ /* Wenn [sec] größer als 0, dann ...*/ sec--; /*...ziehe eine Sekunde von [sec] ab und...*/ document.getElementById(id).innerHTML = sec; /*...Zeige [sec] im Tag mit der id=[id] an und..*/ window.setTimeout("weiterleitung('"+site+"',"+sec+",'"+id+"')", 1000); /*...rufe diese Funktion nach einer Sekunde erneut auf*/ } } </script> </head> <body onLoad="preloader();"> <div id="bitteWarten"> Ich werde beim Laden der Seite angezeigt </div> <div id="weiterGehts"> Ich werde nach dem Laden der Seite angezeigt <br> <a href="http://gerald-grinschgl.lima-city.de/starthere.htm">Weiter</a> <div id="weiterleitung"> Sie werden in <span id="weiterleitung_sek"></span> Sekunden automatisch weitergeleitet </div> </div> <noscript> In Ihrem Browser wurde Javascript deaktiviert,<br> Um dennoch auf die Seite zu gelangen Klicken sie <a href="http://gerald-grinschgl.lima-city.de/starthere.htm">hier</a> </noscript> </body> </html> -
simuliertes schrieb:
Hab da mal was geschrieben:
Klickmich
Hui, werd ich mir gleich auf der Zunge vergehen lassen.
Ist ein wirklich gelungener Preloader mit allem was das Herz begehrt.
Danke, dass du dir die Zeit genommen hast.
LG Gary
Nachtrag: Ich hab's jetzt beinahe 1:1 eingebaut.
Die automatische Weiterleitung müsste nicht sein, aber ich lasse sie für evtl. Interessierte stehen.
Ich habe dich, "simuliertes" als Author angeführt.
Solltest du einen anderen Text wünschen, bitte ich um eine PM.
Danke LG Gary
Beitrag zuletzt geändert: 5.6.2011 11:11:51 von gerald-grinschgl -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
