Cách tải một khung nội tuyến bằng bộ nhớ đệm trong tâm trí

Question

Tôi đã sử dụng phương pháp này trước đây.

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

Trên sự kiện với javascript Tôi đã bật data-src thành src và video bắt đầu phát.

Tôi gặp vấn đề với bộ nhớ cache của trình duyệt, video tự động phát trong nền (tôi tải hình thu nhỏ tại chỗ cho iframe thực) khi quay lại trình duyệt. Do đó tôi đã chuyển sang phương thức mà tôi chỉ tải iframe bên trong nhận xét

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

rồi xóa nhận xét khi nhấp. Tôi thấy Google sử dụng phương pháp chính xác này trên Google plus. Vấn đề là bộ nhớ đệm một lần nữa bây giờ, phía máy chủ thời gian này. Tôi nghĩ rất có khả năng đám mây tự động rút gọn là xóa các nhận xét HTML.

Tìm kiếm nhanh cho thấy khả năng đánh dấu nhận xét của họ có thể không được xóa với cloudfliar. Trên đầu trang nếu điều này là một plugin wordpress để vấn đề vẫn còn có liên quan đến tất cả các loại bộ nhớ đệm bổ sung mà loại bỏ các ý kiến ​​HTML.

Vì vậy, bây giờ câu hỏi của tôi là. Có phương pháp tốt hơn lười biếng iframes mà không có ý kiến ​​HTML? Tôi thích vẫn bằng cách nào đó lưu trữ iframe tại chỗ ... cũng giống như tôi đang viết điều này, tôi có thể lưu trữ dữ liệu để xây dựng iframe trong một số thẻ json ngẫu nhiên được mã hóa hoặc gì đó và sau đó xây dựng iframe khi nhấp.

Answer 1

Just came across this.

Vì vậy, đây tag <script> có thể là một giải pháp tốt, không sửa đổi các dữ liệu cần thiết, nhưng ngăn chặn các trình duyệt từ làm bất cứ điều gì với nó.

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

Phương pháp khác đưa nó vào kịch bản đã thực sự một lần nữa gây W3Tc bao quanh với với [CDATA] rối tung với mã của tôi.

Đây là phương pháp cuối cùng mới và hy vọng của tôi. Tôi thực sự thích nó. Các data() mang lại cho tôi các thuộc tính như nó đi kèm. Ít lớn trên HTML nhưng tôi nghĩ rằng cuối cùng tôi tiết kiệm từ bộ nhớ đệm bổ sung.

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