Cargue el archivo CSS solo si el elemento con clase está presente en la página

3 minutos de lectura

avatar de usuario
daniel vickers

Estoy tratando de optimizar mi carga de archivos CSSS ya que estoy cargando algunos archivos CSS grandes en páginas donde no se usan. ¿Hay alguna forma de ponerlos en cola solo si un elemento está presente con una clase en esa página?

He intentado lo siguiente, sin embargo, no funciona:

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

    if (wowJS.length > 0) {
        $.getScript("https://stackoverflow.com/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 = "https://stackoverflow.com/wp-content/themes/gowebsites/gw-addon/css/animations.css";
        cssNode.rel = "stylesheet";
        //console.log("CSS Node: "+cssNode); = [object Text]

        head.appendChild(cssNode);
    }
});

He visto funciones que funcionan para agregar archivos css al encabezado, sin embargo, ninguno de ellos permite la capacidad de hacerlo condicional.

EDITAR: Desde entonces, acabo de usar la función getScripts() jQuery, sin embargo, todavía necesito saber cómo agregar css al encabezado solo si es necesario.

EDITAR: Para referencia futura para cualquier persona, este es el código de trabajo final:

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

    if (wowJS.length > 0) {
        $.getScript("https://stackoverflow.com/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 = "https://stackoverflow.com/wp-content/themes/gowebsites/gw-addon/css/animations.css";
        cssNode.rel = "stylesheet";

        head.appendChild(cssNode);
    }
});

  • appendChild() acepta un nuevo Nodo o Elemento, no una cadena. También tenga en cuenta que si ha incluido jQuery en la página, puede simplificar esto con $.getScript()

    –Rory McCrossan

    10 de abril de 2019 a las 13:56


  • También lo intenté con solo agregar, sin éxito

    –Daniel Vickers

    10 de abril de 2019 a las 13:57

  • Pensándolo mal con respecto a wp_enqueue. Haría una cola condicional en función de las condiciones que harían que esa clase estuviera disponible en la página. No estoy seguro si se trata de categorías, plantilla de página utilizada, contenido relacionado, etc.

    – charlietfl

    10 de abril de 2019 a las 13:58


  • La única condición sería que se haya utilizado un código abreviado y esté presente un elemento con una clase que no creo que esté mejor hecho o sea capaz en php.

    –Daniel Vickers

    10 de abril de 2019 a las 14:01

avatar de usuario
Zakaria Acharki

Cree los nodos primero, luego agregue y luego use el appendChild() método, como:

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

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

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

  • Y si deseo cargar un script en el pie de página, ¿cómo agregaría el área del pie de página justo dentro de la etiqueta del cuerpo de cierre?

    –Daniel Vickers

    10 de abril de 2019 a las 13:59

  • Llamar appendChild() sobre el body nodo en lugar del head

    –Rory McCrossan

    10 de abril de 2019 a las 14:01

  • Como dijo @RoryMcCrossan, solo necesita especificar el elemento

    – Zakaria Acharki

    10 de abril de 2019 a las 14:02

  • Actualicé mi respuesta con mi código actual, no crea ni vincula los elementos. Y he usado alerta () para verificar el valor de wowJS, devuelve “1”

    –Daniel Vickers

    10 de abril de 2019 a las 15:03

  • createElement de hecho lo soluciona, no recibí la notificación de su comentario y me topé con la respuesta yo mismo jajaja

    –Daniel Vickers

    10 de abril de 2019 a las 15:57

Deberías usar insertAdjacentHTML

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

¿Ha sido útil esta solución?