Fehlersuche in Quelltext
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
band
bild
check
code
fehler
funktion
funktionieren
glauben
image
klammern
machen
methode
paste
prototyp
routine
sinn
solls
sonstiges ereignis
url
zuweisung
-
Habe follgendes geschrieben. Normalerweiße sollte ein Bild angezeigt werden. Dies ist allerdings nicht der Fall. Hab ne Vorlage benutzt, daher kann es sich nur um einen kleinen Fehler handeln, der mir aufgrund meines unwissens nicht auffält.
Hier der Code:
<html> <head> <script type="text/javascript"> var image = new Image();; function Init() { image.onload=CheckLoadStatus; image.onerror=CheckLoadError; image.src="band_contest_143.jpg"; if(image.complete) { document.getElementById("band").style.backgroundImage="url("+image.src+")"; } document.getElementById("band").style.backgroundImage="url("+image.src+")"; document.getElementById("band").style.visibility="visible"; </script> <style type="text/css"> #band { width:138px; height:90px; position:absolute; top:0px; left:0px; padding:0; border:0; background-image:url(""); background-position:center; background-repeat:no-repeat; background-attachement:fixed; visibility:hidden; z-index:1; } </style> <title></title> </head> <body onload="Init()"> <noscript> </noscript> <div id="band"></div> </body> </html>
das Bild heißt band_contest_143.jpg und befindet sich im selben ordner wie die html datei
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Da sind einige Fehler drin:
1. Gewöhn' dir an deine Quelltexte einzurücken
2. Du vergisst die Funktion Init wieder zu schliessen
3. "background-attachement" = background-attachment
Ich hab deinen Quelltext mal im großen ganzen so gelassen wie er ist und nur die Fehler ausgebessert:
<html> <head> <script type="text/javascript"> var image = new Image(); function Init(){ image.src="band_contest_143.jpg"; image.onload=image.CheckLoadStatus; image.onerror=image.CheckLoadError; if(image.complete) { document.getElementById("band").style.backgroundImage="url(\""+image.src+"\")"; } document.getElementById("band").style.backgroundImage="url(\""+image.src+"\")"; document.getElementById("band").style.visibility='visible'; } </script> <style type="text/css"> #band{ width:138px; height:90px; position:absolute; top:0px; left:0px; padding:0; border:0; background: transparent url("") no-repeat fixed center; visibility:hidden; z-index:1; } </style> <title></title> </head> <body onload="Init()"> <noscript> </noscript> <div id="band"></div> </body> </html>
lg Ketchupfleck -
hab das jetzt ma so kopiert und eingefügt, klappt aber immer noch net
-
Bei der Zuweisung der Callbackroutinen hast du die Klammern weggelassen:
image.onload=CheckLoadStatus (); image.onerror=CheckLoadError ();
Das ist aber dahingehend egal, da du diese Routinen erst garnicht definiert hast. Sieht aus wie ein Copy-n-Paste von einem Codesnippet, wo die Hälfte weggelassen wurde.
Denke bitte auch daran:
Wenn sowieso alle Bilder auf der Seite sichtbar sind, dann macht ein Preloader die Seite langsamer.
Preloading macht nur Sinn bei Bildern, die erst nach einer Nutzerinteraktion oder nach einer gewissen Zeit oder durch ein sonstiges Ereignis eingeblendet werden. Dann sollten aber auch nur genau diese vorgeladen werden.
Beitrag zuletzt geändert: 13.8.2009 16:20:21 von census -
selbst wenn es bis jetzt noch keinen sin macht, müsste es ja trotzdem funktionieren oder?
-
census schrieb:
Bei der Zuweisung der Callbackroutinen hast du die Klammern weggelassen:
image.onload=CheckLoadStatus (); image.onerror=CheckLoadError ();
Nope, das war schon richtig so. Wenn du die Funktion an sich übergeben willst, dann ohne Klammern. (Ist auch logisch. Mit Klammern würde man nur den Rückgabewert der Funktion übergeben).
Das ist aber dahingehend egal, da du diese Routinen erst garnicht definiert hast. Sieht aus wie ein Copy-n-Paste von einem Codesnippet, wo die Hälfte weggelassen wurde.
Da wär ich mir auch nicht sicher. Man beachte das image. vor den Methoden. Sind wahrscheinlich vordefiniert. (Ich glaube es macht wenig Sinn Callbackmathoden zu prototypen...)
Was das hier soll, check ich übriegns überhaupt nicht:
if(image.complete) { document.getElementById("band").style.backgroundImage="url("+image.src+")"; } document.getElementById("band").style.backgroundImage="url("+image.src+")"; document.getElementById("band").style.visibility="visible";
Villeicht solls ja so sein:
if(image.complete) { document.getElementById("band").style.backgroundImage="url("+image.src+")"; document.getElementById("band").style.visibility="visible"; }
?
Beitrag zuletzt geändert: 14.8.2009 17:23:27 von nikic -
nikic schrieb:
census schrieb:
Bei der Zuweisung der Callbackroutinen hast du die Klammern weggelassen:
image.onload=CheckLoadStatus (); image.onerror=CheckLoadError ();
Nope, das war schon richtig so. Wenn du die Funktion an sich übergeben willst, dann ohne Klammern. (Ist auch logisch. Mit Klammern würde man nur den Rückgabewert der Funktion übergeben).
Richtig. Das war kompletter Boolshit von mir in einem Anfall geistiger Umnachtung.
Das ist aber dahingehend egal, da du diese Routinen erst garnicht definiert hast. Sieht aus wie ein Copy-n-Paste von einem Codesnippet, wo die Hälfte weggelassen wurde.
Da wär ich mir auch nicht sicher. Man beachte das image. vor den Methoden. Sind wahrscheinlich vordefiniert. (Ich glaube es macht wenig Sinn Callbackmathoden zu prototypen...)
Das onload und onerror Routinen von image sind war mir klar. Aber CheckLoadStatus und CheckLoadError sind nichts, was JS zur Verfügung stellt. Das onload und onerror sind die ganz normalen Eventhandler, wie z.B. in:
<image src="test.gif" onerror="alert('This image didn\'t download successfully')" />
CheckLoadStatus und CheckLoadError sollten daher eigentlich in der Javafehlerkonsole sowas wie "null-Pointer-Exception" oder "Object not found" oder wie auch immer das bei JS heist, werfen.
========== EDIT =============================
Was das hier soll, check ich übriegns überhaupt nicht:
if(image.complete) {
document.getElementById("band").style.backgroundImage="url("+image.src+")";
}
document.getElementById("band").style.backgroundImage="url("+image.src+")"; document.getElementById("band").style.visibility="visible";
Villeicht solls ja so sein:
if(image.complete) {
document.getElementById("band").style.backgroundImage="url("+image.src+")";
document.getElementById("band").style.visibility="visible";
}
?
Macht folgendes nicht mehr Sinn?
image.onload = function () { if (! image.complete) return; document.getElementById("band").style.backgroundImage="url("+image.src+")"; document.getElementById("band").style.visibility="visible"; }
Beitrag zuletzt geändert: 14.8.2009 17:31:27 von census -
Hm, ja, hast recht. Im Script steht einfach
image.CheckLoadStatus
Und ich dachte, man macht sich nicht die Mühe das Image-Object zu prototypen, nur um da irgendne Funktion ein zu fügen. Aber man irrt sich :D -
Wie schon oben beschrieben, glaub ich, dass die Zuweisung des Bildes ans Div in die Callbackroutine von onLoad gehört. Aber das raten wird mir nun zu blöd und ich bastel mir selbst so eine Seite und poste gleich das Ergebnis.
======= EDIT =====================================
So funktioniert das ganze:
<html> <head> <script language="javascript"> function preload () { img = new Image (); img.src = "wallpaper.jpg"; img.onload = function () { document.getElementById ("image").src = img.src; } img.onerror = function () { alert ("Fehler beim Laden des Bildes"); } } </script> </head> <body onload="preload()"> <img id="image"> </body> </html>
Beitrag zuletzt geändert: 14.8.2009 17:41:35 von census -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
