Wie lade ich einen Iframe mit Caching im Hinterkopf

Question

Ich habe diese Methode vor.

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

Auf Ereignisse mit Javascript drehte ich die data-src-src und das Video zu spielen begann.

Ich hatte Browser-Caching-Probleme damit, Videos automatisch im Hintergrund (ich lade ein Thumbnail in Stelle für die tatsächliche Iframe), wenn Sie zurück in den Browser. Aus diesem Grund wechselte ich zu einer Methode, wo ich nur den iframe in einem Kommentar

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

laden und dann den Kommentar auf Klick entfernen. Ich sah Google mit dieser genauen Methode bei Google Plus. Das Problem wird jetzt erneut, diesmal auf der Serverseite, gecached. Ich denke sehr wahrscheinlich, dass cloudflairs auto minify HTML-Kommentare entfernt.

Eine schnelle Suche zeigte mir, dass es wahrscheinlich nicht möglich ist, Kommentare zu markieren, die nicht mit cloudfliar entfernt werden. Ob dies ein Wordpress-Plugin ist, ist das Problem immer noch relevant für alle Arten von Caching-Plugins, die HTML-Kommentare entfernen.

So jetzt ist meine Frage. Gibt es bessere Methode lazerloading iframes ohne HTML-Kommentare? Ich möchte den Iframe immer noch irgendwie an seinem Platz speichern ... nun, gerade während ich dies schreibe, kann ich vielleicht die Daten speichern, um einen Iframe in einem zufälligen Tag, json-codiert, oder etwas zu erstellen, und dann den Iframe auf Klick erstellen.

Answer 1

Just came across this.

So dies der <script> Tag eine gute Lösung sein könnte, benötigt keine Änderung der Daten, sondern verhindert, dass der Browser etwas damit zu tun.

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

Die andere Methode es in Skript tatsächlich setzen wieder verursacht wurde W3TC umgeben mit mit [CDATA] mit meinem Code durcheinander.

Dies ist meine neue und hoffentlich endgültige Methode. Ich mag es wirklich. Die data() gibt mir die Attribute, wie es hereinkommt. Wenig groß auf dem HTML aber ich denke, schließlich bin ich vom Zwischenspeichern Plugins sicher.

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