キャッシングを考慮してiframeをlazyloadする方法

Question

私は以前このメソッドを使用しました。 JavaScriptを使用してイベントに

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

私はsrcにdata-srcを回し、ビデオの再生が開始しました。

ブラウザのキャッシュに問題がありました。動画をバックグラウンドで再生しています（実際のiframeのサムネイルを読み込みます）。そのため、コメント内にiframeを読み込む方法に切り替えました。

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

クリックしてコメントを削除します。私はGoogle plusでこの正確な方法を使ってGoogleを見た。問題は今、今度はサーバーサイドで再びキャッシュされています。私は、cloudflairの自動縮小がHTMLコメントを削除する可能性が非常に高いと思います。

クイック検索では、おそらくcloudfliarで削除されなかったコメントをマークできませんでした。上の場合は、これはそのWordPressのプラグインなので、問題はまだHTMLコメントを削除するすべての種類のキャッシュプラグインに関係しています。

だから今私の質問です。 HTMLコメントのないiframeをlazyloadingするより良い方法はありますか？私はまだ何とか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); 
}