jQuery / JavaScript - 使用 Ajax 加载 iframe 会减慢页面速度答案

【问题标题】：jQuery / JavaScript - Loading iframe with Ajax slows down pagejQuery / JavaScript - 使用 Ajax 加载 iframe 会减慢页面速度
【发布时间】：2011-03-20 03:19:09
【问题描述】：

我正在使用 $.ajax() 加载 iframe：

$("#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...
      });
    }
  });
});

如果 $_POST['action'] 是 'get_the_iframe'，则 iframe 位于一个函数中：

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

它可以工作，但问题是浏览器似乎显示整个页面真的很慢，似乎它在显示页面上的整个内容之前等待 iframe 加载，这是不应该发生的，因为它已经完成了通过ajax。这正是我试图避免的......

有什么想法吗？

【问题讨论】：

标签： javascript ajax iframe jquery

【解决方案1】：

我认为答案的关键是浏览器在哪里运行执行 ajax 发布的 jQuery 片段，或者更具体地说，是何时运行。

我怀疑加载页面的 jQuery 代码发生在整个页面加载之前的某个时间。也许您的浏览器不支持来自同一域的异步加载.. IE 长期以来就是这种情况。因此，浏览器开始加载和处理 iframe，这与您的正常（外部）页面正在执行的其余请求有些同步。

如果不是这种情况，请尝试将启动 ajax 发布的代码放在文档就绪处理程序中。另外，检查其他浏览器，看看问题是否全面出现。

【讨论】：

【解决方案2】：

你看到这个的原因是因为 IFrame 是阻塞元素，尤其是在 IE 中。 IFrame 是在浏览器中创建成本最高的元素，它还会在创建 JavaScript 时阻止其执行。还有关于 IFrame 的资源阻止规则。如果您的页面中有 CSS 文件，则 IFrame 将不会加载，直到浏览器 (IE) 或 Firefox 收到每个 CSS 文件的响应，所有 IFrame 的资源将被阻止，直到收到主页上所有资源的响应.

举个例子，我有一个标准的微调器控件，每当我对服务器进行 AJAX 调用时，它都会显示正在运行的蛇（以向用户提供一些正在发生的事情的反馈）。我还在正文级别创建了 IFrame 元素，以覆盖页面上的所有下拉元素，以防止 IE6/7 溢出错误。在某些时候，我注意到我的 web 服务调用在 IE 中比在 FF 中慢两倍。经过一番调查，我意识到创建 IFrame 元素会阻塞浏览器中的所有内容，包括从服务器接收响应的代码。

我认为没有办法解决它，除了不使用 IFrames...

【讨论】：