Как lazyload iframe с кэшированием в виду

Question

Я использовал этот метод раньше.

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

На мероприятии с JavaScript Я повернул data-src к src и видео начал играть.

У меня были проблемы с кешированием браузера с этим, автовоспроизведение видео в фоновом режиме (я загружаю миниатюру для фактического iframe) при возвращении в браузер. Из-за того, что я перешел на метод, где я просто загрузить IFRAME внутри комментария

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

, а затем удалить комментарий мыши. Я видел Google, используя этот точный метод в Google plus. Проблема теперь кэшируется снова, на этот раз на стороне сервера. Я думаю, что, скорее всего, autowitch cloudflairs удалит HTML-комментарии.

Быстрый поиск показал, что мой, вероятно, невозможно пометить комментарии, которые они не удалят с помощью cloudfliar. В верхней части, если это его плагин wordpress, поэтому проблема по-прежнему актуальна для всех типов кеширующих плагинов, которые удаляют комментарии HTML.

Итак, теперь мой вопрос. Есть ли лучший способ lazyloading iframes без комментариев HTML? Мне нравится как-то хранить iframe на месте ... ну, как я пишу это, я могу хранить данные для сборки iframe в некотором случайном теге json, закодированном или что-то, а затем построить 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); 
}