Question

我正在使用$ .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。这正是我试图避免的......

这里有什么想法吗？

Answer 1

我认为答案的关键在于，或者更具体地说，浏览器正在运行执行ajax帖子的jQuery片段。

我怀疑加载页面的jQuery代码会在整页加载之前发生。也许你的浏览器不支持来自同一域的异步加载。这是IE的情况很长一段时间。所以正在发生的事情是浏览器开始加载和处理iframe，与你的正常（外部）页面正在执行的其他请求有些同步。

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

Answer 2

你之所以看到这个，是因为IFrame是阻塞元素，特别是在IE中。 IFrame是在浏览器中创建的最昂贵的元素，它还将阻止JavaScript在创建时的执行。还有关于IFrame的资源阻止规则。如果您的页面中有CSS文件，则在浏览器（IE）或Firefox收到每个CSS文件的响应之前，IFrame将不会加载，所有IFrame的资源都将被阻止，直到收到主页上所有资源的响应为止

就像一个例子，我有一个标准的微调控件，只要我对服务器进行AJAX调用就会显示运行的蛇（给用户一些反馈，说明发生了什么）。我也是在身体层面创建IFrame元素，覆盖页面上的所有下拉元素，用于IE6 / 7流失的bug。在某些时候，我注意到我的网络服务调用在IE中慢了两倍，然后他们在FF中。经过一番调查，我意识到创建IFrame元素会阻止浏览器中的所有内容，包括从服务器接收响应的代码。

除了不使用IFrame之外，我认为没有办法解决这个问题......

jQuery / JavaScript - 使用Ajax加载iframe会降低页面速度

2 个答案: