使用 jQuery 将嵌入式 vimeo 播放器添加到 DOM 时，如何减少卡顿？答案

【问题标题】：How can I reduce stutter when adding an embedded vimeo player to the DOM with jQuery?使用 jQuery 将嵌入式 vimeo 播放器添加到 DOM 时，如何减少卡顿？
【发布时间】：2012-09-20 21:16:32
【问题描述】：

使用 append 将嵌入式 Vimeo 视频播放器添加到 dom 时，加载 Flash 播放器时会出现明显的卡顿。我尝试过简化加载过程，但没有成功。我尝试淡入内容，但似乎淡入并不能缓解浏览器中 Flash 播放器的实际显示。

我曾考虑尝试将其添加到隐藏可见性的 dom 中，然后在视频实际加载后淡入，但到目前为止还没有成功。 Flash 视频的渲染似乎与 dom 中嵌入元素的可见性完全不同。

我正在使用 Vimeo 视频页面中提供的 Vimeo 嵌入代码。有关如何简化此过程的任何想法？

目前我不包括代码，因为他们的问题很简单，但如果需要澄清，我可以提供一些示例。

【问题讨论】：

请提供更多详细信息，使用jsfiddle.net 粘贴您的代码、html、js、css :)

标签： jquery html dom vimeo

【解决方案1】：

在 Vimeo 上放置一个绝对位置的 div（使用 z-index），为该 div 提供某种不透明的背景和显示“正在加载”之类的文字。或者，您可以使用与网站背景相匹配的纯色。加载此 div 后面的 Vimeo，设置超时，然后淡出覆盖 div，显示视频。

【讨论】：

好主意，我要试试这个
这很好用！有没有办法检测 vimeo 加载过程的完成？我注意到抛出了一个 javascript 错误，上面写着：Unsafe JavaScript attempt to access frame with URL <URL HERE> Domains, protocols and ports must match. 知道如何检测它而不是仅仅使用任意间隔吗？
您也许可以将其与 onload 事件联系起来。试试$('body').on('load', 'iframe', function(){ ... }); 之类的东西，否则你能做的最好的事情就是猜测超时。您收到的错误来自 Vimeo，您对此无能为力。