如何在考虑缓存的情况下延迟加载 iframe

Posted

技术标签:

【中文标题】如何在考虑缓存的情况下延迟加载 iframe【英文标题】:How to lazyload a iframe with caching in mind 【发布时间】:2017-01-04 19:27:51 【问题描述】:

我以前用过这个方法。

<iframe data-src="https://youtube.com/...?autoplay=1"></iframe>

在使用 javascript 的事件中,我将 data-src 转换为 src,视频开始播放。

我遇到了浏览器缓存问题,当返回浏览器时,视频在后台自动播放(我为实际 iframe 加载了缩略图)。因此,我切换到了一种方法,我只在评论中加载 iframe

<!--<iframe src="https://youtube.com/...?autoplay=1"></iframe>-->

然后删除点击评论。我在 Google plus 上看到了 Google 使用这种精确的方法。问题是现在再次缓存,这次是服务器端。我认为很可能 cloudflairs 自动缩小正在删除 html cmets。

快速搜索显示我可能无法将 cmets 标记为它们不会被 cloudfliar 删除。最重要的是,如果这是一个 wordpress 插件,那么这个问题仍然与删除 HTML cmets 的各种缓存插件有关。

所以现在我的问题是。有没有更好的方法延迟加载没有 HTML cmets 的 iframe?我仍然喜欢以某种方式将 iframe 存储在适当的位置......就像我写这篇文章一样,我可能能够存储数据以在一些随机标签 json 编码或其他东西中构建 iframe,然后在点击时构建 iframe。

【问题讨论】:

【参考方案1】:

Just came across this.

所以&lt;script&gt; 标签可能是一个很好的解决方案,不需要修改数据,但会阻止浏览器对其进行任何操作。

HTML

<script type="text/html" class="arve-lazyload">
<iframe src="https://youtube.com/...?autoplay=1"></iframe>
</script>

jQuery

    var lazyloaded_iframe = $('.arve-lazyload');

    $( lazyloaded_iframe.html() ).insertAfter( lazyloaded_iframe );

【讨论】:

【参考方案2】:

将它放入脚本的另一种方法实际上再次导致 W3Tc 环绕 [CDATA] 弄乱我的代码。

这是我的新方法,希望是最终方法。我很喜欢。 data() 给了我属性。在 HTML 上有点大,但我想我终于从缓存插件中解脱出来了。

HTML

<div class="arve-lazyload" data-allowfullscreen="" data-class="arve-iframe fitvidsignore" data-frameborder="0" data-name="" data-sandbox="allow-scripts allow-same-origin" data-scrolling="no" data-src="https://www.youtube-nocookie.com/embed/w68VZ8C1Q24?iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;autohide=1&amp;playsinline=1&amp;autoplay=1"></div>

jQuery

lazyload = wrap.find('.arve-lazyload');

if ( lazyload.length ) 
  $('<iframe></iframe>').attr( lazyload.data() ).insertAfter( lazyload );

【讨论】:

以上是关于如何在考虑缓存的情况下延迟加载 iframe的主要内容,如果未能解决你的问题,请参考以下文章

符号延迟加载

符号延迟加载

动态设置 iframe 的 src 以延迟加载

延迟后加载 iFrame 的源

异步加载和延迟加载

轮播内幻灯片的延迟加载内容(内容为oEmbeds/iframes)