Preloader Jquery in javascript übersetzen

  • Hey... heut mal ne andere Frage... ich bastle fleissig an meinen Preloader herum... und will mehrere schreiben.. jetzt habe ich noch das Problem dass der Code in Jquery ist ich es aber gerne in Javascript hätte... ich weiß nicht wie ich es angehen soll... ich hab den jquery code damals kopiert möchte es aber in zukunft selbst schreiben und vorallem verstehen :D jquery ist super ja... aber naja... ;D


    Code
    $(window).on("load", function () {
          $(".preloadercontainer").delay(2000).fadeOut("slow");
        });
  • Naja, das Javascript muss ja auch erst geladen werden und das CSS steht i. allg. im Head, so dass es auch schnell wirksam ist. Ich erwarte, dass sich das nicht viel nimmt. I. allg. beanspruchen die Bilder den größten Teil der Ladezeit und viele Preloader nehmen nicht einfach eine feste Verzögerung sondern prüfen, wie viele von den Bildern geladen sind.

  • Mal nee Frage was soll der Loader eigentlich anzeigen ?

    Wenn zb einer deine Seite mit einen 56k Modem öffnet , könnte der Seiten aufbau ewig dauern.

    Du müßtest dann noch das Ende des Seitenaufbau auslesen und dann den Loader stoppen.


    Wenn es nur spielerei ist dann ok , dann habe ich nix gesagt:)

  • Genau, deshalb auch mein Hinweis, dass es üblich ist, sich auf das Laden der Bilder zu beziehen (wenn man eine Fortschrittsanzeige haben will) oder auf das onload-Event. Hätte es vielleicht etwas strikter formulieren sollen, denn ohne das macht das Ganze keinen Sinn.

  • Gut.. soweit hab ich mal nen Pen zusammen gebastelt... ich bekomme es zudem nicht hin dass der gradient der ladestand ist... jetzt ist ja das grau der ladestand... anders herum so wie ich es will bekomme ich es einfach nicht hin -.-



    edit: die hr's dienen nur dass bisschen content auf der seite ist und ich sehen konnte dass ich noch scrollen kann

    https://codepen.io/Webdevinspe/pen/YzzyGZZ

  • Etwas unübersichtlich alles.

    Meinst du das es erst grau ist und dann bunt?

    Du brauchst doch nur die rein Folge umzudrehen.

    Den <hr> Kram kannst du auch austauschen und den Container ein height:2000px geben. Dann sieht es nicht ,mehr so wild aus.

    Dein Javascript kann man auch herausschmeißen , wenn man es so macht wie Sempervivum das schon sagte.


    Wenn du aber den loader an der realen Seitenaufbauzeit anpassen willst , dann brauch man Javascript. Da es aber feste 3 Sekunden sind, geht es auch ohne Javascript.


    https://basti1012.bplaced.net/…rdner=html-seminar&id=391

  • Du bist mein Held.. ^^... ich muss es nochmal genau durchschauen, das mit der umgedrehten Reihenfolge hab ich verstanden, das delay habe ich hauptsächlich drinnen dass man die Animation sieht... auf den fertigen Seiten dann sollte es kein festes Delay geben


    Edit: @basti1012 dankenochmal... jetzt hab ichs geschnallt... es war quasi dass die border dann von rechts ausfaded... :D eigentlich so einfach... aber ich habe jetzt die animation weggelassen...also die mit dem gradient und dann habe ich dem grey den gradient zugewiesen... da macht die animation dann auch kein sinn mehr


    https://codepen.io/Webdevinspe/pen/KKKdrwa

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!