Question

我需要帮助解决来自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);
    });

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

Answer 2

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

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

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

Answer 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()

是一样的。

Answer 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？

4 个答案: