如何在缓存中加载iframe并考虑缓存 [英] How to lazyload a iframe with caching in mind

问题描述

之前我使用过这种方法。

I used this method before.

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

关于使用javascript的事件我转了 data-src 到 src ，视频开始播放。

On event with javascript I turned the data-src to src and the video started to play.

我有浏览器缓存问题，视频自动播放在浏览器中返回时的背景（我为实际的iframe加载缩略图）。因此我切换到一种方法，我只是在评论中加载iframe

I had browser caching problems with that, videos autoplaying in background (I load a thumbnail in place for the actual iframe) when going back in the browser. Because of that I switched to a method where I just load the iframe inside a comment

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

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

and then remove the comment on click. I saw Google using this exact method on Google plus. Problem is caching again now, this time server side. I think very likely cloudflairs auto minify is removing HTML comments.

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

A quick search showed my its probably not possible to mark comments to they wont removed with cloudfliar. On top if this its a wordpress plugin so the issue is still relevant to all kinds of caching plugins that remove HTML comments.

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

So now my question is. Is there better method lazyloading iframes without HTML comments? I like to still somehow store the iframe in place ... well just as I am writing this I may be able to store the data to build a iframe in some random tag json encoded or something and then build the iframe on click.

推荐答案

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

The other method putting it into script was actually again causing W3Tc surround with with [CDATA] messing with my code.

这是我的新方法，也是最后的方法。我很喜欢。 data（）为我提供了属性。在HTML上有点大，但我想最后我从缓存插件中保存。

This is my new and hopefully final method. I really like it. The data() gives me the attributes as it comes in. Little big on the HTML but I think finally I am save from caching plugins.

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并考虑缓存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！