我想推迟加载特定的 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/
最佳答案
您应该使用您的代码创建一个文件并将其与 [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 分配给 script 标签,您可以使用以下内容:
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?
关于javascript - 如何在 Wordpress 上延迟嵌入 YouTube 视频的 javascript?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57613472/