jquery 动态加载CSS样式表并等待它加载

zsbz8rwp 于 12个月前发布在 jQuery

关注(0)|答案(4)|浏览(113)

我有一个脚本，它检测到一个按钮点击，它将附加一个CSS样式表的“头”与jQuery这样：

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.不工作：
public int findDuplicate（）; }
1.不工作：

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

型
1.不工作：

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

型
1.不工作：

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

型
1.不工作：

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

型
相信我。什么都不管用......

一个解决方法：

我在DOM中加载css，然后立即用jQuery再次删除它。这样当添加链接到头部时就足够快了。

jquery

来源：https://stackoverflow.com/questions/35644072/dynamically-load-css-stylesheet-and-wait-for-it-to-load

4条答案

按热度按时间

thtygnil1#

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

$(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

字符串

赞(0）回复(0）举报 12个月前

fbcarpbf2#

纯JavaScript解决方案。
您需要在head中插入一个link节点，然后将onload事件附加到该节点上。可以为Onload属性分配一个回调函数，该函数在css文件加载后执行。请参阅下面的示例代码，了解如何实现您想要的功能。

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

字符串
检查jsfiddle。“
MDN reference on Link element如果你好奇

赞(0）回复(0）举报 12个月前

zfycwa2u3#

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

字符串

赞(0）回复(0）举报 12个月前

vsdwdz234#

要在动态插入样式表链接并依赖于这些计算时避开竞争条件，请执行以下操作：

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的URL，然后插入代码作为一个风格，而不是链接元素，然后在下一个框架中解析promise并从那里继续。

赞(0）回复(0）举报 12个月前

我来回答

jquery 动态加载CSS样式表并等待它加载

4条答案

相关问题

热门标签

最新问答