延迟加载 Flash 对象

Posted 2023-03-13

【中文标题】延迟加载 Flash 对象

【英文标题】：Lazy-loading flash objects

【发布时间】：2011-02-06 15:13:22

【问题描述】：

我正在使用 jQuery 延迟加载插件来延迟加载大型网页上的首屏图像。这很好用。现在，我想将同样的技术应用到一个同样位于首屏的大型 Flash 对象。我不认为延迟加载插件处理不是图像的东西（至少到目前为止看起来不是这样。）我可能必须自己做。在这种情况下，如何检测包含 Flash 对象的区域何时变得可见？

编辑：我想我可以使用 jQuery 尺寸插件来破解某些东西并跟踪包含 Flash 对象的div。

Edit2：好的，我已经就这个问题提出了悬赏。如果有人能在我周末有机会玩这个之前得到它，+250 给你。 :)

【参考方案1】：

如果我没记错的话，将 DOM 中 flash 对象的 wmode 参数设置为 opaque 即可。关于各种wmode设置here有一点讨论

【讨论】：

wmode 与延迟加载到底有什么关系？

我不确定是否如此，但是我们发现，当使用替代 wmode 设置时，不在视口中的 Flash 对象在滚动到视图中之前不会被初始化。

【参考方案2】：

嗯，我不知道这个 jquery prugin 是如何工作的，但是你说如果你使用图像它会做你想要的 - 那么为什么不将图像放置在你的 flash 对象应该是的位置，设置一个 @ 987654321@ 对于这个图像，如果这个 onload 被触发，你用你想要的 flash-object 替换图像（假设 jquery-plungin 做了一些疯狂的事情，所以之前没有触发 onload）。

编辑：我知道官方不允许使用 img-tags 的 onload-attribute，但大多数（所有？）现代浏览器都支持这一点（据我所知）——也许这有助于获得另一个没有这些问题的解决方案...

【参考方案3】：

我认为最简单的方法是编辑lazy load plugin 并将detect-when-element-is-in-view 代码与特定于图像的代码分开。视图内检测代码会触发元素（在您的情况下为容器/占位符 div）上的“出现”事件，您可以挂钩以加载 Flash。

【参考方案4】：

lazyLoad 不适用于您的脚本的原因是因为lazyLoad 会查看 Flash 对象（和）上不存在的“src”属性。

在lazyLoad src 中，您应该修改任何引用“src”属性的地方。您需要知道元素是对象还是嵌入并正确引用它们的“源”。

例如（未经测试）：

/* Save original only if it is not defined in html. */
if (undefined == $(self).attr("original")) 
   $(self).attr("original", $(self).attr("src") || $(self).attr("data") || $(self).find("embed").attr("src") );

如果您仍然有兴趣赠送该赏金，请告诉我，我会进一步调查。

【参考方案5】：

查看延迟加载插件的源代码，您会发现并没有发生什么神奇的事情。基本上那里发生了两件有趣的事情：

有一种方法可以通过获取包含窗口的高度和元素的偏移量来确定元素相对于折叠的位置。 还有一个事件处理程序，用于侦听滚动事件，检查是否需要出现任何“隐藏”图像

因此，为了延迟加载，我只需重用或删除确定给定元素是否在视图中的函数。连接到滚动事件，如果需要出现某些内容，您可以使用 swfobject 嵌入 SWF。那应该这样做。

另外看看懒加载插件source，真的不难。