动态加载CSS样式表并等待其加载

我有一个脚本，该脚本可检测到单击按钮的情况，该脚本将使用jQuery将CSS样式表附加到“ head”，如下所示：

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

然后，我需要根据CSS的width和height属性进行一些计算：

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();

但是，如果我启动CSSDone（）; 在添加样式表之后，计算便会在加载CSS之前进行。我在网上疯狂地搜索，但我尝试的所有方法均无效：

我尝试了以下选项：

1. 不起作用：

   link.onload = function（）{CSSDone（）; }

2. 不起作用：

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

3. 不起作用：

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

4. 不起作用：

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

5. 不起作用：

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

相信我。什么都行不通......

我将CSS加载到DOM中，然后立即用jQuery将其立即删除。这样，以后将链接添加到头部时，它足够快。