动态加载css样式表并等待它加载

我有一个脚本,我在按下这样的按钮时加载一个CSS样式表：

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

相信我.什么都行不通……
一个解决方法：
我在DOM中加载css并使用jQuery再次删除它.这样,当稍后将链接添加到头部时,它足够快.


最佳答案
您需要在头部插入一个链接节点,然后将onload事件附加到该节点.在您的代码链接中是一个字符串.请参阅下面的示例代码,了解如何实现您想要的功能.

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

jsfiddle

                
                                原文地址：https://www.jb51.cc/css/427658.html
                                 版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

动态加载css样式表并等待它加载

相关推荐