CSS Datei nachladen ( alternate stylesheet )

Hi Ich habe eine CSS-Datei, die als Standard-Stylesheet geladen wird: Wenn ich weitere alternativer Stylesheets im HTML-Doc anlege, werden diese beim Laden der Seite sofort geladen, oder wird ein alternativer Stylesheets erst geladen, wenn der Besucher ihn auswählt / aktiviert? Mir gehts dabei um die Ladezeiten des HTML-Doc's, die ja deftig ansteiegen würde, wenn mehrere alternative Stylesheets vom Sedrver gleiche geladen würden. Bei meinen Versuchen habe ich den Eindruck als dauert es länger, wenn ich 2 alternative Stylesheets anlege... kann doch nicht sein - oder ?

Der hier verwendete Code

<body> <button class="lade" data-load="style_1.css" id="style1">Style 1 laden</button> <button class="lade" data-load="style_2.css" id="style2">Style 2 laden</button> <button class="lade" data-load="style_3.css" id="style3">Style 3 laden</button> <br> <button class="entload" data-entload="style_1.css" id="kill_style1">Style 1 löschen</button> <button class="entload" data-entload="style_2.css" id="kill_style2">Style 2 löschen</button> <button class="entload" data-entload="style_3.css" id="kill_style3">Style 3 löschen</button> <br><br> Grüne Buttons zeigen an welchen Stylesheet gerade geladen ist </body> <script> lo=document.querySelectorAll('button'); lo.forEach(function(f){ f.addEventListener('click',function(){ if(f.getAttribute('class')=='lade'){ var fileref=document.createElement("link") fileref.setAttribute("rel", "stylesheet") fileref.setAttribute("href", 'https://basti1012.bplaced.net/css/'+f.getAttribute('data-load')) document.getElementsByTagName("head")[0].appendChild(fileref) }else{ var allsuspects=document.getElementsByTagName('link') for (var i=allsuspects.length; i>=0; i--){ if (allsuspects[i] && allsuspects[i].getAttribute('href')!=null && allsuspects[i].getAttribute('href').indexOf(f.getAttribute('data-entload'))!=-1) allsuspects[i].parentNode.removeChild(allsuspects[i]) } } }) }) </script>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!