如何确保 JQuery 正确动态注入 CSS 并可供使用？

发布于 2024-10-28 19:49:18 字数 381 浏览 2 评论 0原文

我知道我可以这样做来注入 CSS，如下所示：

$(document).ready(function() {
    $("a").click(function() {
        $('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
    });
});

但是，这个 async.即使我附加了链接，也不能保证 CSS 当时可用。（因为CSS下载）所以，如果有另一个js同时运行并尝试aasign一个类，那么 1）它仍然有效吗？文件完全下载后是否会应用CSS？

如果没有，是否有类似回调或一些技巧可以用来知道 CSS 是否已完全下载？

原文

I know that I can do this to inject CSS like this:

$(document).ready(function() {
    $("a").click(function() {
        $('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
    });
});

But, this async. i.e. even I append the link, there is no guarantee that the css is available at that time. (because of the CSS download)
so, if there is another js runs at the same time and try to aasign a class, then
1) Will it still work? Will the css applied later on after the file is fully downloaded?

If not, is there something like a call back or some trick that I can use to know that the css is fully downloaded?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

感悟人生的甜 2024-11-04 19:49:18

如果你需要保证加载并且CSS肯定在同一个域上，你可以通过Ajax请求内容，然后直接注入属性。

通过在中创建一个虚拟元素并调用 text( ) 以及 CSS 文件的内容（作为字符串）。

例如，粗略地说：

 $("a").click(function() {
        $.get('style2.css', function (data) { 
            $('link').text(data);
            // Stuff that must happen after CSS injection here
        });
    })

但老实说，这是一个罕见的用例。

If you need it guaranteed to be loaded and the CSS is definitely on the same domain, you could request the contents via Ajax and then inject the properties directly.

I've had good luck doing this (in iOS at least) by creating a dummy <link> element in the <head> and calling text() on it with the contents of the CSS file (as a string).

For example, roughly:

 $("a").click(function() {
        $.get('style2.css', function (data) { 
            $('link').text(data);
            // Stuff that must happen after CSS injection here
        });
    })

But honestly this is a rare use case.

回复收藏 0 原文

~没有更多了~