Script Datei in Bedingung laden

clubcola · 18. März 2018

Hallo,

ich möchte ab einer bestimmte Bildschirmgröße javascript aus einer Quelle laden.

Ich lade

Code

<script type="text/javascript" src="my-script.min.js"></script>

und habe folgende Abfrage

Code

$(document).ready(function() {    
    if (theWidth > 800) { do_something }
});

Nun möchte ich beide kombinieren, sinngemäß so:

Code

$(document).ready(function() {    
    if (theWidth > 800) { 
     src="my-script.min.js";
     do_something 
}
});

Habt ihr eine Idee?

Sempervivum · 18. März 2018

Was Du vorhast, lässt sich machen, aber warum so kompliziert und das Skript bedingt laden? Einfach das Skript unbedingt laden und die Anweisungen, die Du brauchst, bedingt ausführen.

clubcola · 18. März 2018

Ich möchte eine recht große Tabelle mit dataTables laden. Indirekt geht es darum das auf kleineren Displays die Ladezeiten und auch das rendern der Tabelle sonst zu lange dauert (Stichwort: mobile Index / pagespeed / usability). Deswegen möchte ich eine einfacherer Version mit bedeutend weniger Javascript Code für mobile User standardmäßig anzeigen.

Sempervivum · 18. März 2018

Das klingt stichhaltig. Verstehe ich das richtig: Auf mobilen Geräten möchtest Du nicht Datatables sondern ein anderes, vereinfachtes Skript, zum Laden verwenden?

Und du schreibst, dass die Tabelle recht groß ist. Könnte dann auch die Ladezeit der Daten eine Rolle spielen?

clubcola · 18. März 2018

Ja, auf mobilen Geräten möchte ich eine abgespeckte dataTables laden oder vielleicht nur eine HTML Tabelle - das weiß ich noch nicht genau.

Viele zusätzliche Funktionen von dataTables (PDF, Drucken, Excel etc.) benötigen zusätzliche Scripte. Alleine pdf hat über 1MB. Das kann ich keinem mobile User zumuten.

Ich wollte es aber vermeiden 2 Seiten zu erstellen.

Sempervivum · 18. März 2018

Dann würde ich empfehlen, das Skript-Element dynamisch zu erzeugen und in den Head einzufügen:

Code

$(document).ready(function() {    
    if (theWidth > 800) {
        var tag = document.createElement("script");
        tag.src = "deinscript.js";
        document.querySelector("head").appendChild(tag);
        // ggf. weitere 
    }
});

(ungetestet)

clubcola · 18. März 2018

Klasse, danke schonmal. Werds nachher testen.

Script Datei in Bedingung laden

Jetzt mitmachen!

Teilen

Tags