Javascript ausführen wennn CSS geladen hat.
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
andenken
bewertung
code
dank
danken
funktion
inhalt
kleine projekte
laden
ladezeit
nachladen
schrift
sekunde
tab
tag
teil
text
type
url
webseite
-
Hallo, ich habe das Problem, dass ich in einer tag/funktion">Funktion eine Schrift importiert habe, und wenn ich sie zum ersten mal ausführe, lädt es die schrift, aber zeigt sie noch nicht an, da es erst lädt, wenn ich sie das erste mal benutze, aber es dann schon zu spät ist. Ich muss es also ein zweites mal ausführen nach etwa 3 sec Ladezeit. Kann man nicht irgendwie ein eventlistener oder so machen, und sobald style geladen wurde die funktion ausführen?
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich weiß nicht, ob es funktioniert, aber du kannst deine Javascript-Funktion doch mit
<body onload="funktion()">
ausführen.
Viele Grüße
Gentleman1
-
Du kannst entweder dein Javascript ausführen, wenn die Seite geladen hat, mit
document.addEventListener( "load" , function() { //mein inhalt });
Das "onload" Event wird ausgeführt, wenn ALLES geladen ist. Also auch alles CSS.
Wenn du CSS per Javascript nachladen möchtest, kannst du es lieber mittels
var node = document.createElement("link"); node.addEventListener( "load" , function() { /*habe erfolgreich geladen*/ } ); node.href = "hallo.css"; node.type = "text/css"; node.rel = "stylesheet"; document.head.appendChild( node );
Wäre inline dann.
Liebe Grüße -
ggamee schrieb:
Du kannst entweder dein Javascript ausführen, wenn die Seite geladen hat, mit
document.addEventListener( "load" , function() { //mein inhalt });
Das "onload" Event wird ausgeführt, wenn ALLES geladen ist. Also auch alles CSS.
Wenn du CSS per Javascript nachladen möchtest, kannst du es lieber mittels
var node = document.createElement("link"); node.addEventListener( "load" , function() { /*habe erfolgreich geladen*/ } ); node.href = "hallo.css"; node.type = "text/css"; node.rel = "stylesheet"; document.head.appendChild( node );
Wäre inline dann.
Liebe Grüße
Perfekt, danke, ich benutz die erste Variante. Nur ist blöd, dass es einfach nichts anzeigt beim laden, und da es doch von 4-10 Sekunden dauert, wär ein Ladebalken schön, eine Idee wie man das lösen könnte? -
Solange wird der Tab auch laden an sich. Das onload Event wird erst ausgeführt, wenn alles geladen ist. Daher wird der Tab so lange Ladend angezeigt.
Du kannst allerdings dein HTML so aufbauen, dass immer eine Ladeanzeige angezeigt wird, wenn die Seite geladen wird, also dein Ursprünglichen body mittels display:none verstecken, und einen Ladebalken anzeigen. Dann das onload Event mit der zweiten Variante die ich oben gepostet habe versehen, sodass dann erst das CSS nachgeladen wird. Wenn der Callback dann kommt kannst du den Ladebildschirm ausblenden und deine Seite einblenden.
Liebe Grüße -
c143 schrieb: und da es doch von 4-10 Sekunden dauert,....
4-10 Sek. Ladezeit für eine Webseite ist definitiv zu lang. Bevor Du jetzt noch zusätzliche Zeit durch Ladebalken verschwendest, solltest Du eher Maßnahmen andenken, diese unsägliche Ladezeit zu verringern. Google wird dir das bei der Bewertung deiner Seite übrigens auch danken.
-
fatfreddy schrieb:
c143 schrieb: und da es doch von 4-10 Sekunden dauert,....
4-10 Sek. Ladezeit für eine Webseite ist definitiv zu lang. Bevor Du jetzt noch zusätzliche Zeit durch Ladebalken verschwendest, solltest Du eher Maßnahmen andenken, diese unsägliche Ladezeit zu verringern. Google wird dir das bei der Bewertung deiner Seite übrigens auch danken.
Ach ich mach noch keine richtige Webseite, das sind alles kleine Projekte, aber danke für die Anmerkung. :)
@ggamee, danke, ich versuchs nacher mal.
Beitrag zuletzt geändert: 4.2.2013 20:39:05 von c143 -
Einfach den CSS-Teil vor den Javascript-Teil definieren und danach die Javascript-Funktion im HTML-Tag:
<body onload="javascript: funktion();">
starten und es müsste funktionieren. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
