jquery-oembed-all 将 iframe 附加到 div 使页面渲染速度太慢答案

【问题标题】：jquery-oembed-all append iframe to a div makes page too slow to renderjquery-oembed-all 将 iframe 附加到 div 使页面渲染速度太慢
【发布时间】：2012-05-01 11:42:31
【问题描述】：

我正在使用插件 jquery-oembed-all。插件提供 oembed 功能以将外部 url 动态嵌入到站点中。

插件完成了解析嵌入内容的所有繁重工作，然后执行以下操作：

oembedContainer.append(oembedData.code);

其中 oembedContainer 是本地页面上动态生成的跨度，它将保存嵌入获取的内容和 oembedData.code 是实际内容已获取。

oembedData.code 也可以是 iframe，这是 youtube 和其他视频内容的常见情况。

如果我在同一页面上有很多视频，那么现在每个 iframe 都会花费大量时间来加载，而且我的页面繁忙指示器永远不会停止。我发现滚动页面也很困难，除非所有 iframe 都已完全加载。

我想知道 facebook 如何提供如此流畅的用户界面（是的，他们就是 facebook。）

任何建议，我该如何改善这种情况？

【问题讨论】：

您好，我是该插件的作者。您要加载多少项目？仅仅是 IFrame 速度慢还是嵌入工作正常？

标签： jquery iframe oembed

【解决方案1】：

我刚刚查看了代码，看看为什么它很慢。

Youtube 没有为 oembed (see here) 提供 JSONP 选项，这意味着库无法直接通过浏览器获取 oembed。为了解决这个问题，Yahoo YQL 用于获取 OEmbed 数据并将其包装在一些 JSONP 中。 YQL 需要一些时间来返回数据（我发现 1-2 秒）所以有很多请求需要很长时间。

有两种选择： 1. 让 Youtube 将 JSONP 添加到它的 oembed 中 - 不太可能，因为它被要求并且他们说因为它不是官方规范的一部分，所以他们不会支持它。 2. 更改库以返回使用 iframe 查找 :) - 更有可能 - 只需在 github 上添加一张票，我会看看我能做什么。

安德鲁

【讨论】：

不可能异步加载 iframe 并且不附加到主页正文，除非它们已完全加载？我可以看到问题在于 iframe 只有其他嵌入才能正常工作。与缓慢的响应无关，但也与 youtube 无关，除非您将 wmode=transparent 附加到它们返回的 iframe src，否则 youtube iframe 不会尊重页面上其他组件的 z-index。有什么解决办法吗？
还有一个问题。调用 oembed 函数的最佳方法是什么？我是否应该在渲染时为每个项目调用它（传入 id 选择器 $('#somelinkid')）。或者我应该在页面完成渲染后调用一次并在 css 选择器 $('.oembed') 上调用 oembed？基本上，我使用这个插件的页面是一个 facebook 克隆，它是一个用户的社交订阅源，所以同一页面上可能有 100 多个帖子，而且各种事件也可能会出现新帖子。
好的，我很确定它是在异步 atm 中完成的。在它们完全加载之前不确定是否要附加它们 - 我将不得不对此进行调查。如果我将其更改为 iframe，我也许可以添加 wmode。您能否在 github 上为这些东西制作一张票，因为我可能会忘记，因为我不经常查看堆栈溢出 :) 我发现最好通过选择器一次加载所有内容，然后在加载新项目时触发只为这些新项目。