Динамическая загрузка содержимого страницы и ее 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. Нажмите на ссылку, покажите «Загрузка ..»
2. Загрузите файл CSS с помощью ajax, в функции обратного вызова создайте тег <style>, а затем вставьте код CSS в тег <style>,а затем начните загрузку контента с помощью ajax.

* вы можете оптимизировать поток, загружая CSS и контент по отдельности, но контент будет происходить только в скрытом контейнере, после завершения загрузки файла CSS, затем изменить скрытый контейнербыть показано.

Надеюсь, это поможет.