kostenloser Webspace werbefrei: lima-city


Javascript ausführen wennn CSS geladen hat.

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    c143

    c143 hat kostenlosen Webspace.

    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?
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Ich weiß nicht, ob es funktioniert, aber du kannst deine Javascript-Funktion doch mit

    <body onload="funktion()">


    ausführen.

    Viele Grüße
    Gentleman1 :king:
  4. g****e

    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
  5. Autor dieses Themas

    c143

    c143 hat kostenlosen Webspace.

    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?
  6. g****e

    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
  7. 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. :wink:
  8. Autor dieses Themas

    c143

    c143 hat kostenlosen Webspace.

    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. :wink:



    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
  9. 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.
  10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!