JavaScript Optimization Patterns (Part 1) das verspricht eine unterhaltsame Serie zu werden. Irgendwo bin ich neulich auch mal über die Performance von Local vs Global in JS gestoßen und habe den Link leider nicht gespeichert, aber das hier ist eine sehr gute Erklärung.
Wie kam eigentlich das IMG-Tag zustande? Ein kleiner Ausflug in die Ursprünge des WWW. Im Prinzip funktionierte das damals wie heute auch, nur mit weniger Papierkram. Und ohne größere Notwendigkeiten, komplett rückwärtskompatibel jeden alten Krempel durchzuschleifen.
Menschen ernähren Familien, Menschen brauchen etwas, das man gemeinhin “Einkommen” nennt. Und das wird nicht aus kostenlosen Pitches oder dem Verschenken von Ideen finanziert. Oder dachte das jemand? Wer jetzt zustimmend nickt, wurde dreimal hochgeworfen und nur zweimal aufgefangen.
Nachdem ich eine vernüftige Ladeanimation gesucht habe, und bei allem immer irgendwie jQuery dranhängen musste, hab ich beschlossen, das ganze mal in lean zu lösen. Probleme dabei gibt es eigentlich nur im Bereich des Animationsstarts durch JS, dazu habe ich bei CSS-Tricks den passenden Tipp gefunden.
var links = document.querySelectorAll( 'a' ),
linkslen = links.length;
for ( var link = 0; link < linkslen; link++ ) {
links[link].addEventListener( 'click', function ( e ) {
var lb = document.querySelectorAll( '.loading-bar' )[0];
lb.classList.remove( 'visible' );
//noinspection SillyAssignmentJS
// triggers reflow for animation restart
lb.offsetHeight = lb.offsetHeight;
lb.classList.add( 'visible' );
}, false )
}
Edit am 29.12.: Ich habe den Code mal ein bisschen lesbarer und einfacher gemacht. Dazu habe ich das innere DIV entfernt, dass CSS zusammengeführt und das JS ein bisschen lesbarer gemacht. Mein Partial aus meinem Hugo-Projekt habe ich mal als Gist online gestellt. Sichergestellt sein sollte, dass das Partial so eingefügt wird, dass .loading-bar direktes Kind-Element von BODY ist. Ansonsten müssen ggf. die Styles angepasst werden.