Загружайте файл CSS, только если элемент с классом присутствует на странице

#javascript #php #jquery #wordpress

Вопрос:

Я пытаюсь оптимизировать загрузку файлов 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 в заголовок, однако ни одна из них не позволяет сделать его условным.

РЕДАКТИРОВАТЬ: с тех пор я только что использовал функцию getScripts() jQuery однако мне все еще нужно знать, как добавлять 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);
    }
});

1. appendChild() принимает новый узел или элемент, а не строку. Также обратите внимание, что если вы включили jQuery на страницу, вы можете упростить это с помощью $.getScript()

2. Я также пытался с помощью just append, но безуспешно

3. Неправильно думать об этом в отношении wp_enqueue. Вы бы условно поставили в очередь на основе любых условий, которые сделали бы этот класс доступным на странице. Не уверен, что это категории, используемый шаблон страницы, связанный с контентом и т. Д

4. Единственным условием было бы то, что был использован короткий код и присутствует элемент с классом, который, я не считаю, лучше всего подходит или подходит для php?

Ответ №1:

Сначала создайте узлы, затем добавьте их, используя appendChild() метод, например :

 var scriptNode = document.createElement("script");
scriptNode.src = "/wp-content/themes/gowebsites/gw-addon/js/wow.js";

var cssNode = document.createElement("link");
cssNode.href = "/wp-content/themes/gowebsites/gw-addon/css/animations.css";
cssNode.rel = "stylesheet";

head.appendChild(scriptNode);
head.appendChild(cssNode);

1. И если я захочу загрузить скрипт в нижний колонтитул, как можно добавить область нижнего колонтитула непосредственно внутри закрывающего тега body?

2. Вызовите appendChild() body узел вместо head

3. Как сказал @RoryMcCrossan, вам нужно просто указать элемент

4. Я обновил свой ответ своим текущим кодом, он не создает и не связывает элементы. И я использовал alert() для проверки значения wowJS, оно возвращает «1»

5. createElement действительно исправляет это, не получил уведомления о вашем комментарии, и я просто наткнулся на ответ сам, лол

Ответ №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">');