Question

我正在尝试优化CSSS文件的加载，因为我正在不使用它们的页面上加载一些大型CSS文件。仅当该页面上的类中包含某个元素时，我才可以将它们排入队列。

我尝试了以下方法，但是它不起作用：

jQuery(document).ready(function($) {
    //Script Checkers
    var wowJS = $('.wow');

    if (wowJS.length > 0) {
        $.getScript('/wp-content/themes/gowebsites/gw-addon/js/wow.js', function() {
            new WOW().init();
        });

        var head = document.getElementsByTagName('head')[0];
        var cssNode = document.createTextNode("link");

        cssNode.href = "/wp-content/themes/gowebsites/gw-addon/css/animations.css";
        cssNode.rel = "stylesheet";
        //console.log("CSS Node: "+cssNode); = [object Text]

        head.appendChild(cssNode);
    }
});

我见过可以将css文件添加到头部的函数，但是这些函数都不允许将其设置为有条件。

编辑：自此，我才使用了jQuery函数getScripts（），但我仍然需要知道如何仅在需要时将css添加到标头中。

编辑：供所有人参考，这是最终的工作代码：

jQuery(document).ready(function($) {
    //Script Checkers
    var wowJS = $('.wow');

    if (wowJS.length > 0) {
        $.getScript('/wp-content/themes/gowebsites/gw-addon/js/wow.js', function() {
            new WOW().init();
        });

        var head = document.getElementsByTagName('head')[0];
        var cssNode = document.createElement("link");

        cssNode.href = "/wp-content/themes/gowebsites/gw-addon/css/animations.css";
        cssNode.rel = "stylesheet";

        head.appendChild(cssNode);
    }
});

Answer 1

首先创建节点，然后使用updateCount(){ this.dataService.currentCount.subscribe(res => { this.count = res; }); return true; }方法添加节点，如：

appendChild()

Answer 2

您应该使用insertAdjacentHTML

head.insertAdjacentHTML("afterend",'<script language="javascript" src="/wp-content/themes/gowebsites/gw-addon/js/wow.js"></script>');
head.insertAdjacentHTML("afterend",'<link href="/wp-content/themes/gowebsites/gw-addon/css/animations.css" rel="stylesheet">');

仅在页面上存在带有类的元素时才加载CSS文件

2 个答案: