动态加载页面内容及其CSS - 如何防止由于尚未加载CSS而跳转？

Question

在我的网站上，我捕获点击链接以使用 AJAX 动态加载该页面的内容。此新内容可能需要一些尚未加载的 CSS 文件。将目标元素的内容设置为响应 HTML 将自动加载所需的 CSS（<link> 标记在那里），但在加载 CSS 之前，内容会在短时间内看起来混乱。

除了提前加载所有 CSS 文件之外，我还能做些什么来防止这种情况发生？为了完整起见，这是我的代码：

$(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');
        }
    });
}

Answer 1

1. 点击链接，显示“Loading..”
2. 通过ajax加载CSS文件，在回调函数中，创建<style>标签，然后将CSS代码插入<style>标签，然后开始通过ajax加载内容。

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

希望对你有帮助。