javascript - 添加 defer 到 Scripts functions.php

Question

在我网站的functions.php脚本中就像

add( 'scripts', '//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' );

这显示在源代码上

<script src="...jquery.min.js"></script>

想在代码中添加“延迟”

<script src="...jquery.min.js" defer></script>

请任何人指导我实现这一目标？

标签： javascriptphp

Answer 1

通过该文件functions.php，我假设您使用的是 WordPress。推迟加载 javascript 最好使用类似插件wprocket或优化器插件的其他免费变体。

但是如果你想自己做，你可以使用下面的代码：

function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) 
    return $url;
if ( strpos( $url, 'jquery.js' ) ) 
    return $url;

return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );

此外，如果您不在 WordPress CMS 上，您可以使用脚本标签来实现您想要的。在下面的代码中，将 defer1.js、defer3.js 和 defer3.js 等替换为您要延迟的脚本的链接。

function parseJSAtOnload() {
    var links = ["defer1.js", "defer2.js", "defer3.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;
}