Javascript 如何在考虑缓存的情况下懒散地加载iframe

我以前用过这个方法

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

然后单击删除注释。我看到Google在Google plus上使用这种精确的方法。现在的问题是缓存再次出现，这次是服务器端。我认为cloudflairs auto minify很可能正在删除HTML注释

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

所以现在我的问题是。有没有更好的方法在没有HTML注释的情况下加载iFrame？我仍然喜欢以某种方式将iframe存储在适当的位置。。。就在我写这篇文章的时候，我可能能够将数据存储在一些随机标记json编码的东西中来构建iframe，然后在单击时构建iframe。

因此，

标记可能是一个很好的解决方案，不需要修改数据，但可以防止浏览器对其进行任何操作

HTML

---

另一种将其放入脚本的方法实际上再次导致W3Tc被

[CDATA]

包围，使我的代码混乱不堪

这是我的新方法，希望是最后的方法。我真的很喜欢。

data（）。HTML有点大，但我想我终于从缓存插件中节省下来了

HTML



jQuery

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

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

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

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

lazyload=wrap.find（'.arve lazyload'）；
if（lazyload.length）{
$（''）.attr（lazyload.data（））.insertAfter（lazyload）；
}

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

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

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

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

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