Archiv-Modus von Basti1012 Lösungspage

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 ?

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>
etwas text zum testen
</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", '/css_webseite/'+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>

basti1012.bplaced.net

CSS Datei nachladen ( alternate stylesheet )

Code