如何延遲加載緩存的iframe

我以前使用過這種方法。如何延遲加載緩存的iframe

<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上使用這種確切的方法。問題現在再次緩存，這次是服務器端。我認爲很可能cloudflairs auto minify正在刪除HTML註釋。

一個快速搜索顯示我的可能無法標記評論，他們不會刪除與cloudfliar。最重要的是，如果這是一個wordpress插件，所以這個問題仍然與各種緩存插件刪除HTML註釋有關。

所以現在我的問題是。有沒有更好的方法lazyloading沒有HTML註釋的iframe？我喜歡仍然以某種方式存儲iframe ...就在我寫這篇文章時，我可能能夠存儲數據以在一些隨機標記json編碼或其他內容中構建iframe，然後在點擊時構建iframe。

來源

2016-08-28 redanimalwar

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

來源

2016-08-28 19:26:06 redanimalwar

另一種方法是把它變成劇本實際上是再次引起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); 
}

來源

2016-10-07 01:03:13 redanimalwar

如何延遲加載緩存的iframe

回答

相關問題