如何在缓存中加载iframe并考虑缓存

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存储到位...就像我写这篇文章一样,我可能能够存储数据以构建一个iframe,在一些随机标签json编码或其他东西,然后在点击时构建iframe.

Answer 1

刚刚遇到这个。

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

超文本标记语言

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