如何确保在 AJAX 内容之前首先加载动态 CSS？答案

【问题标题】：How to ensure dynamic CSS is loaded first before AJAX content?如何确保在 AJAX 内容之前首先加载动态 CSS？
【发布时间】：2026-01-18 21:40:01
【问题描述】：

我需要有关来自 AJAX 的 CSS 文件和 HTML 代码之间的计时问题的帮助。我通过在头部添加链接来加载 CSS，并且我通过 AJAX 加载 HTML 内容。

我的意图是将样式（在 profile_info.css 文件中）应用于动态内容（由 profile_info.php 生成）。这就是为什么我首先下载 css 然后要求 ajax 获取内容。

如何确保首先加载 CSS，以便将样式应用于动态 HTML 内容？代码如下：

$('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', 'css/profile_info.css') );

$.get('/ajax/controllers/profile_info.php',
    {id: user_id},
    function(response){
        $('#middle_content').html(response);
    });

【问题讨论】：

为什么需要动态地将样式添加到文档的头部？这将导致您失去将 CSS 放在元素中的性能优势。浏览器通常会在它到达 Javascript 之前处理该 CSS，但在您的情况下，因为您在 Javascript 中动态地执行它，所以情况并非如此。你真的需要像那样动态添加 CSS 吗？
是的，我认为动态内容的样式，我们有 2 个解决方案。1.我们需要静态地将 CSS 用于将来所有即将出现的 html 内容在页面上。另一种是动态加载CSS，这就是我在代码中尝试的
我不是 100% 确定，但我认为这应该按原样工作。你确定 CSS 文件被加载了吗？您可能需要像 /css/profile_info.css 这样的根路径
CSS 和 ajax 内容正在完美加载，但有时 CSS 加载比 html 内容需要更多时间。在这种情况下，样式在 :(.
另一种方法，使用 CSS 变量：*.com/a/65927959/2213708

标签： css ajax jquery

【解决方案1】：

将get 命令放入由样式表链接的load 事件触发的函数中。

可能是这样的

$('head').append( $('<link rel="stylesheet" type="text/css" />')
.attr('href', 'css/profile_info.css').load(function(){
    $.get(
      '/ajax/controllers/profile_info.php',
      {id: user_id},
      function(response){
      $('#middle_content').html(response);
                     });
}) );

【讨论】：

感谢 Jacob 的回复，能否请您编写加载事件的代码。感谢您的帮助。
太好了，让我试试，我会再次发表评论。
先生不工作 :(。我猜（不确定）加载事件可以与 body 标签内的任何 div 或 HTML 元素相关联，如图像或 div。加载图像/div 后，可以触发加载事件自动。在动态内容上设置样式（应用 css）的最佳方式是什么？
你给我指出了正确的方向，但我们问如何检测 css 是否已加载？
您在 ajax 调用中进行 ajax 调用！ (load($.get) 哪些内容将被注入到 head 标签中为了您的计划工作，您需要一个“在进行 ajax 调用之前”回调。您需要使用 $.ajax({beforeSend:function(){//fetch the stylesheet here });

【解决方案2】：

有些 CSS 需要比 JQuery 需要先加载。首先或什至以某种假装的顺序。这就是为什么在普通的 HTML 页面加载时，我们将所有 CSS 写入 <head> 部分！ ;-) 浏览器总是首先加载它，在所有正文代码之前。

如果有任何帮助，这里有一个解决方案，可以在某个层次结构中加载不同的代码。

ajax_getScript('dir/certainPage.php')
    .then(function(retObjHTML){           //'ajax_getScript()' has been TRIGGERED and, when finish, the browser comes next line!
        /*----------------*/
        $.when(ajax_getScript('dir/scrp/certainPage.css'))
            .done(function(retObjCSS){   //It will only enter next line, after the complete CSS file is loaded into the browser!
                /*----------------*/
                $divToFill
                    .prepend(retObjCSS)
                    .prepend(retObjHTML)
                /*----------------*/
            });
        /*----------------*/
    });

还有一个简单的函数，它通过 AJAX 加载“url”内容的通用“HTML”：

ajax_getScript = function(url){       //the complete '$.ajax' parameters set can be checked here: http://coursesweb.net/jquery/jquery-ajax
    //      $.get( url [, dataToSent ] [, success(data, textStatus, jqXHR) ] [, dataType ] )    Returns: object 'jqXHR'.
    return  $.get(url, function(retAjaxObj){}, "html");
}

【讨论】：

【解决方案3】：

上面的示例是在串行提取中单独加载每个文件。

但是，我们可以并行执行，节省一些等待时间（如果文件超过几个，可能会非常耗时！）并且仍然确保之前加载所有需要的文件 - 以编写/使用 HTML 或任何其他事件。

$.when(ajax_getScript('dir/certainPage.php'), ajax_getScript('dir/scrp/certainPage.css'))
            .done(function(retObjHTML, retObjCSS){
                //----------------
                $formToComand
                    .prepend(retObjCSS[0])
                    .prepend(retObjHTML[0]);
                //----------------
})

回调函数

ajax_getScript()

是一样的。

【讨论】：

【解决方案4】：

我会将所有需要的 CSS 放入您的静态主样式表中。更容易维护。

但是，如果你真的想要，你可以很脏，并在你的 html 响应中输出你的 css（将样式标签放在 html 内容标签之前）：

<style type="text/css">
.overwrite-css{background:red;color:white;}
</style>
<div class="overwrite-css">This is red</div>

但是：这真的很脏，真的，你应该把所有的 css 放在你的静态 css 文件中。

【讨论】：

对于基于 ajax 的网站，动态内容的数量通常非常高，因此静态地为所有人设置 CSS 并不是一个好主意。
我个人希望所有的 CSS 都被加载、缓存一次。您无法击败它，即使它可能会使初始加载时间更长一些。但是，嘿，每个项目都是不同的。至少我的回答为您提供了一种安全的方式来确保在新的 html 被注入之前相关的 css 可用。
出于安全考虑，我同意你的看法。