I am trying to async some of my css files without plugin. have found this solution on github but i am a beginner and wanted to make sure that it doesn't have any security issue or web browser support problem. can anyone help me with this? Thank you.
function load_scripts_and_styles() {
// register loadCSS
wp_register_script( 'load-css-async', get_stylesheet_directory_uri() . '/path/to/js/loadCSS.js', array(), '', false );
// enqueue loadCSS
wp_enqueue_script( 'load-css-async' );
}
add_action('wp_enqueue_scripts', 'load_scripts_and_styles', 999);
// This is the cleaner code per request of a thread in the LinkedIn group "WordPress"
// this is a modified file for demonstration purposes
// original repository https://github.com/filamentgroup/loadCSS/
/*!
loadCSS: load a CSS file asynchronously.
[c]2014 @scottjehl, Filament Group, Inc.
Licensed MIT
*/
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" );
// load Font Awesome from CDN
loadCSS( "//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" );
// load a local CSS file
loadCSS( "http://yourserver.tld/path/to/your/css/file.css" );