jQuery / JavaScript - загрузка iframe с помощью Ajax замедляет работу страницы

Question

Я загружаю iframe с $ .ajax ():

$("#iframe_wrapper").each(function(){
  $.ajax({
    type: "post",
    url: "http://site.com",
    data: { action: 'get_the_iframe' },
    context: this,
    success: function(html){
      $(this).html(html);
      $(this).show();
      $('#theiframe').load(function(){
        // do stuff with the iframe...
      });
    }
  });
});

iframe находится внутри функции, которая вызывается, если $ _POST ['action'] равно 'get_the_iframe':

<iframe id="theiframe" name="theiframe" src="http://site.com/page/"></iframe>

это работает, но проблема в том, что браузер, кажется, отображает всю страницу очень медленно, кажется, что он ожидает загрузки iframe, прежде чем отобразить весь контент на странице, чего не должно быть, потому что это сделано корыто Аякс Это именно то, чего я пытался избежать ...

Есть идеи, что здесь не так?

Answer 1

Причина, по которой вы видите это, заключается в том, что IFrame блокирует элемент, особенно в IE. IFrames - самый дорогой элемент для создания в браузере, и он также будет блокировать выполнение JavaScript при его создании. Также есть правило блокировки ресурсов относительно IFrame. Если у вас есть CSS-файлы на вашей странице, IFrame не будет загружаться до тех пор, пока браузер (IE) или Firefox не получит ответ на каждый CSS-файл, все ресурсы IFrame будут заблокированы до получения ответа на все ресурсы на главной странице .

В качестве примера, у меня был стандартный элемент управления вращением, который отображал запущенную змею всякий раз, когда я выполняю AJAX-вызов на сервер (чтобы дать пользователю некоторую обратную связь о том, что что-то происходит). Я также должен был создать элемент IFrame на уровне тела, чтобы наложить все раскрывающиеся элементы на странице для IE6 / 7, прокачавшей ошибку. В какой-то момент я заметил, что мои вызовы веб-службы в IE примерно в два раза медленнее, чем в FF. После некоторого расследования я понял, что создание элемента IFrame блокирует все в браузере, включая код, который получает ответ от сервера.

Не думаю, что есть способ обойти это, если не использовать IFrames ...

Answer 2

Я думаю, ключом к ответу является то, где или, более конкретно, когда ваш фрагмент jQuery, выполняющий запись ajax, запускается браузером.

Я подозреваю, что код jQuery для загрузки страницы происходит за некоторое время до полной загрузки страницы. И, возможно, ваш браузер не поддерживает асинхронную загрузку из одного домена. Это было в IE в течение длительного времени. Таким образом, браузер начинает загружать и обрабатывать iframe в несколько этапах с остальными запросами, которые выполняет ваша обычная (внешняя) страница.

Если это не так, попробуйте поместить код, который запускает запись ajax, в обработчик готовых документов. Кроме того, проверьте в других браузерах, чтобы увидеть, если проблема возникает по всем направлениям.