Загружать файл CSS, только если элемент с классом присутствует на странице
Я пытаюсь оптимизировать загрузку файлов 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.info("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);
}
});
Я также пытался просто добавить, но безуспешно
Думая об этом неправильно относительно wp_enqueue. Вы бы условно поставили в очередь на основе любых условий, которые сделали бы этот класс доступным на странице. Не уверен, что это категории, используемый шаблон страницы, контент и т. д.
Единственным условием было бы использование шорткода и присутствие элемента с классом, который, я не считаю, лучше всего сделать или сделать в php?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Сначала создайте узлы, затем добавьте их, используя метод 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);
И если я захочу загрузить скрипт в нижний колонтитул, как добавить область нижнего колонтитула прямо внутри закрывающего тега body?
Вызов appendChild() на узле body вместо head
Как сказал @RoryMcCrossan, вам нужно просто указать элемент
Я обновил свой ответ своим текущим кодом, он не создает и не связывает элементы. И я использовал alert(), чтобы проверить значение wowJS, которое возвращает «1».
createElement действительно исправляет это, не получил уведомления о вашем комментарии, и я просто сам наткнулся на ответ, лол
Хорошая работа @Daniel
Вы должны использовать 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">');
appendChild()принимает новый узел или элемент, а не строку. Также обратите внимание, что если вы включили jQuery на страницу, вы можете упростить это с помощью$.getScript()