如何异步加载 CSS - WordPress

Posted 2023-03-06

【中文标题】如何异步加载 CSS - WordPress

【英文标题】：How to load CSS asynchronously - WordPress

【发布时间】：2018-09-18 11:54:19

【问题描述】：

我正在尝试异步加载CSS，但下面的代码没有加载CSS。为什么？

从here获得源码

function loadCSS(href, before, media) 
    "use strict";
    var ss = window.document.createElement("link");
    var ref = before || window.document.getElementsByTagName("script")[0];
    ss.rel = "stylesheet";
    ss.href = href;
    ss.media = "only x";
    ref.parentNode.insertBefore(ss, ref);
    setTimeout(function() 
        ss.media = media || "all";
    );
    return ss;


// here's where you specify the CSS files to be loaded asynchronously

// load Google Web Font 
loadCSS("http://fonts.googleapis.com/css?family=Lato|Open+Sans");

功能：

function load_scripts_and_styles() 

    // register loadCSS
    wp_register_script( 'load-css-async', get_stylesheet_directory_uri() . '/loadCSS.js', array(), '', false );

    // enqueue loadCSS
    wp_enqueue_script( 'load-css-async' );

【问题讨论】：

是否有控制台错误信息？或者这只是悄悄地失败了？

控制台没有错误

我在控制台中检查的脚本没有错误。 'load_script_and_styles()' 函数有错误

您是在尝试将 load_scripts_and_styles() 作为 javascript 还是 php 执行？

使用 add_action .. add_action( 'wp_enqueue_scripts', load_scripts_and_styles', 100 );

【参考方案1】：

您的http://fonts.googleapis.com 似乎有问题尝试使用其他一些 css 文件。似乎工作正常。

function loadCSS(href, before, media) 
    "use strict";
    var ss = window.document.createElement("link");
    var ref = before || window.document.getElementsByTagName("script")[0];
    ss.rel = "stylesheet";
    ss.href = href;
    ss.media = "only x";
    ref.parentNode.insertBefore(ss, ref);
    setTimeout(function() 
        ss.media = media || "all";
    );     
    return ss;


// here's where you specify the CSS files to be loaded asynchronously

loadCSS("http://localhost/demowp/wp-content/themes/sydney/css/file.css");

【讨论】：

是的！试过问题不在于脚本。问题在于 wp_enqueue_script。你发现 wp_enqueue_script 有什么错误吗？

似乎http://fonts.googleapis.com 字体已包含在您的主题中。这是问题。

但其他 CSS 也没有加载