Laden Sie das CSS-Stylesheet dynamisch und warten Sie, bis es geladen ist

Ich habe ein Skript, das einen Klick auf eine Schaltfläche erkennt, auf die es mit jQuery ein CSS-Stylesheet an den “Kopf” anfügt:

const link = "<link class="listcss" rel="stylesheet" href="http://....list.css">";
$("head").append(link);

Dann muss ich einige Berechnungen basierend auf den CSS-Eigenschaften Breite und Höhe durchführen:

function CSSDone(){
            if($(window).width()>640){
                $(".grid-item").css({"height":$(".grid-item").width()*0.2});
                $(".grid_item_img").css({"height":$(".grid-item").width()*0.2});
            console.log("a");
            }else{
                $(".grid-item").css({"height":$(".grid-item").width()*0.33});
                $(".grid_item_img").css({"height":$(".grid-item").width()*0.33});
            console.log("b");       
            }
        }
        CSSDone();

Wenn ich jedoch CSSDone(); Unmittelbar nach dem Hinzufügen des Stylesheets finden die Berechnungen statt, bevor das CSS geladen wird. Ich habe wie verrückt im Internet gesucht, aber alles, was ich versucht habe, funktioniert nicht:

Ich habe diese Optionen ausprobiert:

1. Funktioniert nicht:

   link.onload = Funktion () { CSSDone (); }

2. Funktioniert nicht:

    if (link.addEventListener) {
      link.addEventListener('load', function() {
        CSSDone();
      }, false);
    }
   

3. Funktioniert nicht:

    link.onreadystatechange = function() {
      var state = link.readyState;
      if (state === 'loaded' || state === 'complete') {
        link.onreadystatechange = null;
        CSSDone();
      }
    };
   

4. Funktioniert nicht:

    $(window).load(function () {
        CSSDone();
    });
   

5. Funktioniert nicht:

    $(window).bind("load", function() {
        CSSDone();
    });
   

Glaub mir. Nichts funktioniert……

**Eine Problemumgehung:**

Ich lade das CSS in das DOM und entferne es sofort wieder mit jQuery. Auf diese Weise ist es schnell genug, wenn Sie den Link später zum Kopf hinzufügen.

Sie müssen ein einfügen link Knoten im Kopf und dann befestigen onload Veranstaltung dazu. In Ihrem Code-Link ist ein String. Sehen Sie sich den Beispielcode unten an, um zu erfahren, wie Sie das Gewünschte implementieren.

var link = document.createElement('link');
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.onload = CSSDone;
link.setAttribute("href", 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
document.getElementsByTagName("head")[0].appendChild(link);

Überprüfen jsfiddle.

MDN-Referenz auf Link-Element falls Sie neugierig sind

Sie können dies versuchen, glaube ich CSSDone() Code ein $("head").append(link)Rückruf von

$(document).ready(function(){
$('.btn').on('click', function(){
link = "<link class="listcss" rel="stylesheet" href="https://stackoverflow.com/list.css">";
        $("head").append(link, function(){
        if($(window).width()>640){
                $(".grid-item").css({"height":$(".grid-item").width()*0.2});
                $(".grid_item_img").css({"height":$(".grid-item").width()*0.2});
            console.log("a");
            }else{
                $(".grid-item").css({"height":$(".grid-item").width()*0.33});
                $(".grid_item_img").css({"height":$(".grid-item").width()*0.33});
            console.log("b");       
            }

        }); // append link

        }); // button click
}); // document ready

Verwendung von jQuery:

var head = $('head');
var link = $('<link>')
    .attr('rel', 'stylesheet')
    .attr('type', 'text/css')
    .attr('href', url)
                        .on('load', callback)
                        .on('error', error)
                       .appendTo(head);