Question

之前我使用过这种方法。

<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上看到谷歌使用这种方法。问题是现在再次缓存，这次是服务器端。我认为cloudflairs自动缩小很可能正在删除HTML评论。

快速搜索显示我可能无法标记评论，因为他们不会使用cloudfliar删除。最重要的是，这是一个wordpress插件，所以问题仍然与删除HTML注释的各种缓存插件有关。

所以现在我的问题是。是否有更好的方法延迟加载没有HTML注释的iframe？我仍然希望以某种方式将iframe存储到位......就像我写这篇文章一样，我可能能够存储数据以构建一个随机标记json编码的iframe，然后在点击时构建iframe。

Answer 1

Just came across this.

因此，<script>标记可能是一个很好的解决方案，不需要修改数据，但会阻止浏览器对其执行任何操作。

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 );

Answer 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

2 个答案: