在我的网站，我捉对链接的点击加载动态地使用AJAX该页面的内容。这种新的内容可能需要在没有加载一些CSS文件。设定目标元素的响应HTML的内容会自动加载所需的CSS（即＆LT;链接＆GT; 标签在那里），但内容会被弄乱了直到CSS被载入短暂的时期。

除了加载事先所有的CSS文件，我能做些什么，以prevent呢？为了完整起见，这里是我的code：

  $（文件）。就绪（函数（）{

    $（'A'）。住（点击，函数（事件）{
        如果（this.target || this.rel =='忽略'|| this.rel =='的fancybox'）{
            返回true;
        }

        如果（/^javascript:/.test(this.href））{
            返回true;
        }

        如果（this.href.indexOf（'＃'）＆GT; = 0）{
            返回false;
        }

        如果（！this.href）{
            返回true;
        }

        loadDynamicPage（this.href）;
        。事件preventDefault（）;
        返回false;
    }）;
}）;

VAR currentLoader = NULL;
功能loadDynamicPage（URL）{
    如果（currentLoader）{
        currentLoader.abort（）;
        currentLoader = NULL;
    }

    $（'＃后退按钮）addClass（'loaderBG'）。
    currentLoader = $阿贾克斯（{
        背景：$（'＃army_content），
        数据类型：文本，
        网址：网址+'和;格式=原始，
        成功：功能（数据）{
            currentLoader = NULL;
            $（'＃后退按钮）removeClass移除（'loaderBG'）。
            clearRoomIntervals（）;

            $（本）。html的（数据）.find（'[标题]'）。提示（{
                showURL：假的，
                轨道：假的，
                延迟：300
            }）;

            $（文件）.trigger（'dynamicLoad'）;
        }
    }）;
}
 

解决方案 点击该链接，显示的正在加载... 在阿贾克斯加载CSS文件，在回调函数，创建＆LT;风格＆GT; 标记，然后将CSS code到＆LT;风格＆GT; 标记，然后阿贾克斯开始加载内容

*你可以单独优化流程通过加载CSS和内容，但内容只是发生在一个隐藏的容器，一旦CSS文件完成加载，然后更改隐藏容器中显示。

希望它帮助。

On my website, I catch clicks on links to load the content of that page dynamically using AJAX. This new content may require some CSS file that isn't loaded yet. Setting the content of the target element to the response HTML will automatically load the required CSS (the <link> tags are there), but the content will look messed up for a brief period until the CSS gets loaded.

Other than loading all CSS files in advance, what can I do to prevent this? For completeness sake, here is my code:

$(document).ready(function() {

    $('a').live('click', function(event) {
        if (this.target || this.rel == 'ignore' || this.rel == 'fancybox') {
            return true;
        }

        if (/^javascript:/.test(this.href)) {
            return true;
        }

        if (this.href.indexOf('#') >= 0) {
            return false;
        }

        if (!this.href) {
            return true;
        }

        loadDynamicPage(this.href);
        event.preventDefault();
        return false;
    });
});

var currentLoader = null;
function loadDynamicPage(url) {
    if (currentLoader) {
        currentLoader.abort();
        currentLoader = null;
    }

    $('#backButton').addClass('loaderBG');
    currentLoader = $.ajax({
        context: $('#army_content'),
        dataType: 'text',
        url: url + '&format=raw',
        success: function(data) {
            currentLoader = null;
            $('#backButton').removeClass('loaderBG');
            clearRoomIntervals();

            $(this).html(data).find('[title]').tooltip({
                showURL: false,
                track: false,
                delay: 300
            });

            $(document).trigger('dynamicLoad');
        }
    });
}

*you can optimize the flow by load CSS and content individually, but content only take place in a hidden container, once CSS file finish load, then change hidden container to be shown.

Hope it helps.