javascript - 如何延迟 WordPress 网站上 YouTube 视频的 JavaScript 解析?

标签 javascript wordpress

我今天才意识到,在我的 1.2 MB 网站(根据 GTMetrix)中,有 550k 是一个 YouTube 视频。

我的网站是一个 WordPress 网站,当前视频在 iframe 中加载。

我希望我的网站加载速度更快...但不确定如何进行。如果我可以让 YouTube 视频在被点击之前不加载,而只是在那里有一个缩略图,这似乎是正确的做法?

最佳答案

<强>1。将“scr”替换为“data-src”

<iframe width="560" height="315" data-src="https://www.youtube.com/embed/123456789" frameborder="0" allowfullscreen></iframe>

<强>2。添加Javascript

function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;

与过去相比,现在您的网站加载速度更快。

我关注了这个博客,它对我有用:http://www.codecanal.com/defer-parsing-javascript-youtube-videos/

关于javascript - 如何延迟 WordPress 网站上 YouTube 视频的 JavaScript 解析?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38864444/

相关文章:

javascript - AngularJS 中的子菜单(展开/折叠树)

CSS 选择 :nth-of-child(1) not working

javascript - 如何将 Scrollify.js 与 Wordpress 和 Elementor 一起使用?

wordpress - WooCommerce - 我在哪里可以编辑由钩子(Hook)生成的 HTML?

php - 获取最新的帖子 ID 无法按预期工作

javascript - 从浏览器到本地连接的 iPhone 的文件传输

javascript - 如何将 html5 输入类型日期和时间转换为 javascript 日期时间

javascript - 找出等宽字母字符串的 "graphic length"

javascript - 使用 RequireJS 预编译的 Handlebars 模板

php - 在 HTML 样式 =""CSS 中使用 PHP 简码