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>
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>