如何在 Wordpress 上延迟嵌入 YouTube 视频的 javascript？

Question

我想推迟加载特定的 Javascript 文件。在 GTMetrix 上，我在“延迟加载 Javascript”类别下获得 14 分。我想推迟加载这个文件：

https://www.youtube.com/yts/jsbin/player_ias-vflRCamp0/en_US/base.js

我尝试在我的主题页脚中插入脚本，就在标签之前。这是我尝试过的：

`<script type="text/javascript">
function parseJSAtOnload() {
var element = document.createElement("script");
element.src = "https://www.youtube.com/yts/jsbin/player_ias-vflRCamp0/en_US/base.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", parseJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", parseJSAtOnload);
else window.onload = parseJSAtOnload;
</script>

`

我也试过了：

`<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "https://www.youtube.com/yts/jsbin/player_ias-vflRCamp0/en_US/base.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>`

这些脚本对 GTMetrix 分数没有任何作用。

我也试过这个：

`<script type="text/javascript">
function parseJSAtOnload() {
var links = ["www.youtube.com/yts/jsbin/player_ias-vflRCamp0/en_US/base.js", "www.youtube.com/yts/jsbin/www-embed-player-vflO7uv3_/www-embed-player.js"],
headElement = document.getElementsByTagName("head")[0],
linkElement, i;
for (i = 0; i < links.length; i++) {
linkElement = document.createElement("script");
linkElement.src = links[i];
headElement.appendChild(linkElement);
}
}
if (window.addEventListener)
window.addEventListener("load", parseJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", parseJSAtOnload);
else window.onload = parseJSAtOnload;
</script>`

此脚本将暂时起作用。我将在 GTMetrix 上测试该页面，它显示 Javascript 已延迟。在瀑布图上，它显示这些脚本已被取消（这里的见解也会受到赞赏？）

当我重新测试以确保它正常工作时，我回到了原来的 14 分。我还能尝试什么，或者我做错了什么？

网址：https://www.fralinpickups.com/product/vintage-hot/

Answer 1

您应该使用您的代码创建一个文件并将其与[wp_enqueue_script][1] 挂钩。

如果您的文件名为 my_script.js 并且位于主题的 /js/ 文件夹中，则该函数应如下所示：

// You probably already have a function to enqueue scripts in your theme function.php file.
function my_script() {

    wp_enqueue_script( 'my_script', get_template_directory_uri() . '/js/my_script.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_script' );

在其他脚本之后加载它的关键在函数的第五个参数中，当设置为 true 时，它​​将在页脚中加载脚本，在 body 标签之前。如果您的脚本需要 jQuery 和/或其他依赖项，您可以使用相应的句柄将它们添加到数组中，如文档中所述 (here)。

如果您想将 defer 分配给脚本标签，您可以使用以下内容：

function add_defer_attribute($tag, $handle) {
    if ( 'my_script' !== $handle )
        return $tag;
    return str_replace( ' src', 'defer="defer" src', $tag );
}
add_filter('script_loader_tag', 'add_defer_attribute', 10, 2);

更多关于script_loader_tag的信息。

更新：

这是一个有效的答案，可以帮助您推迟 youtube javascript：How do you Defer Parsing of JavaScript for YouTube video on a WordPress site?