Question

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

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

然后我需要根据css的宽度和高度属性进行一些计算：

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再次移除它。这样，当稍后将链接添加到头部时，它就足够快了。

Answer 1

您需要在头部插入link节点，然后将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

Answer 2

你可以尝试这个我相信..在CSSDone()的回调中包含$("head").append(link)代码

$(document).ready(function(){
$('.btn').on('click', function(){
link = "<link class='listcss' rel='stylesheet' href='/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

Answer 3

使用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);

Answer 4

要在动态插入样式表链接然后依靠这些计算时避免竞争情况：

function downloadCSS(url) {
    function insertCss(code) {
        var style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = code;
        document.querySelector("head").appendChild(style);
    }

    return new Promise(async (resolve, reject) => {
        try {
            let src = await axios.get(url);
            insertCss(src.data);
        } catch (e) {
            return reject(e);
        }

        requestAnimationFrame(function () {
            resolve();
        });
    });
}

(async function setup() {
    try {
        await downloadCSS('https://myapp.com/style.css');        
    } catch (e) {
        return reject(e);
    }
    
    //rest of code
})();

我将axios库用于HTTP请求，但是您可以使用任何喜欢的东西。

这个想法是，您要等待downloadCSS promise，它会下载CSS的网址，然后将代码作为一种样式（而不是link元素）插入，然后在下一帧解析promise并从那里继续。

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

4 个答案: