我以前用过这个方法。
<iframe data-src="https://youtube.com/...?autoplay=1"></iframe>
在使用 javascript 的事件中,我将 data-src
更改为 src
并且视频开始播放。
我遇到了浏览器缓存问题,当返回浏览器时,视频会在后台自动播放(我为实际的 iframe 加载了缩略图)。因此,我切换到一种方法,我只在评论中加载 iframe
<!--<iframe src="https://youtube.com/...?autoplay=1"></iframe>-->
然后点击删除评论。我看到谷歌在谷歌加号上使用了这个确切的方法。问题现在再次缓存,这次是服务器端。我认为 cloudflairs auto minify 很可能正在删除 HTML 注释。
快速搜索显示我可能无法将评论标记为它们不会被 cloudfliar 删除。最重要的是,如果这是一个 wordpress 插件,那么这个问题仍然与各种删除 HTML 注释的缓存插件有关。
那么现在我的问题是。有没有更好的方法在没有 HTML 注释的情况下延迟加载 iframe?我仍然喜欢以某种方式将 iframe 存储在适当的位置……就像我写这篇文章一样,我可以存储数据以在一些随机标记 json 编码或其他内容中构建 iframe,然后在点击时构建 iframe。
最佳答案
所以这是 <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 );
关于javascript - 如何在考虑缓存的情况下延迟加载 iframe,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39194836/