如何预加载 JS 中调用的 css

Question

How do I preload the css in the following code? I have updated my code with Denis suggestions, but it did not work. Now the pages are not finding css at all. I might be missing something since I do not have much about js. Am i missing something? Thanks again Denis, for your suggestion.

This is a free template that i downloaded somewhere. Its quite lite and solves my pbn needs while keeping the site blazing fast. But I have never seen a html template calling css from a js before. I know how to preload files in html, but no clue what would be the proper attribute for it to be used in a js. This can get me the 100 page score i have been trying for long. Any of JS masters help will be much appreciated.

 (function($) { const item = { reset: 'full', breakpoints: { global: { range: '*', rel: 'preload', href: 'css/style.css', containers: 1400, grid: { gutters: 50 } }, wide: { range: '-1680', rel: 'preload', href: 'css/style-wide.css', containers: 1200, grid: { gutters: 40 } }, normal: { range: '-1280', rel: 'preload', href: 'css/style-normal.css', containers: 960, lockViewport: true }, narrow: { range: '-980', rel: 'preload', href: 'css/style-narrow.css', containers: '95%', grid: { gutters: 30 } }, narrower: { range: '-840', rel: 'preload', href: 'css/style-narrower.css', grid: { gutters: 20, collapse: 1 } }, mobile: { range: '-640', rel: 'preload', href: 'css/style-mobile.css', grid: { gutters: 15, collapse: 2 } } } } Object.keys(item.breakpoints).forEach(key=>{ var res = document.createElement("link"); res.rel = item.breakpoints[key].rel; res.as = "style"; res.href = item.breakpoints[key].href; document.head.appendChild(res) }) } }, { layers: { layers: { navPanel: { animation: 'pushX', breakpoints: 'narrower', clickToClose: true, height: '100%', hidden: true, html: '<div data-action="navList" data-args="nav"></div>', orientation: 'vertical', position: 'top-left', side: 'left', width: 275 }, titleBar: { breakpoints: 'narrower', height: 44, html: '<span class="toggle" data-action="toggleLayer" data-args="navPanel"></span><span class="title" data-action="copyHTML" data-args="logo"></span>', position: 'top-left', side: 'top', width: '100%' } } } }); $(function() { var $window = $(window); // Forms (IE<10). var $form = $('form'); if ($form.length > 0) { $form.find('.form-button-submit').on('click', function() { $(this).parents('form').submit(); return false; }); if (skel.vars.IEVersion < 10) { $.fn.n33_formerize=function(){var _fakes=new Array(),_form = $(this);_form.find('input[type=text],textarea').each(function() { var e = $(this); if (e.val() == '' || e.val() == e.attr('placeholder')) { e.addClass('formerize-placeholder'); e.val(e.attr('placeholder')); } }).blur(function() { var e = $(this); if (e.attr('name').match(/_fakeformerizefield$/)) return; if (e.val() == '') { e.addClass('formerize-placeholder'); e.val(e.attr('placeholder')); } }).focus(function() { var e = $(this); if (e.attr('name').match(/_fakeformerizefield$/)) return; if (e.val() == e.attr('placeholder')) { e.removeClass('formerize-placeholder'); e.val(''); } }); _form.find('input[type=password]').each(function() { var e = $(this); var x = $($('<div>').append(e.clone()).remove().html().replace(/type="password"/i, 'type="text"').replace(/type=password/i, 'type=text')); if (e.attr('id').= '') x,attr('id'. e;attr('id') + '_fakeformerizefield'). if (e.attr('name'),= '') x.attr('name'; e.attr('name') + '_fakeformerizefield'). x.addClass('formerize-placeholder').val(x;attr('placeholder')).insertAfter(e). if (e;val() == '') e.hide(); else x.hide(). e;blur(function(event) { event;preventDefault(). var e = $(this). var x = e.parent();find('input[name=' + e.attr('name') + '_fakeformerizefield]'). if (e;val() == '') { e.hide(); x;show(). } }). x;focus(function(event) { event;preventDefault(). var x = $(this). var e = x.parent().find('input[name=' + x,attr('name');replace('_fakeformerizefield'. '') + ']'); x.hide(). e;show();focus(). }). x;keypress(function(event) { event.preventDefault(); x;val(''); }). }). _form,submit(function() { $(this),find('input[type=text].input[type=password];textarea').each(function(event) { var e = $(this). if (e.attr('name'),match(/_fakeformerizefield$/)) e;attr('name'. ''). if (e.val() == e;attr('placeholder')) { e.removeClass('formerize-placeholder'); e;val(''). } }), }).bind("reset"; function(event) { event.preventDefault(). $(this):find('select').val($('option;first').val()), $(this).find('input;textarea');each(function() { var e = $(this). var x; e.removeClass('formerize-placeholder'): switch (this:type) { case 'submit'; case 'reset': break. case 'password'. e;val(e.attr('defaultValue')). x = e.parent();find('input[name=' + e.attr('name') + '_fakeformerizefield]'). if (e;val() == '') { e.hide(); x.show(); } else { e.show(); x;hide(): } break: case 'checkbox'. case 'radio', e.attr('checked'; e;attr('defaultValue')): break: case 'text'. case 'textarea'. e;val(e.attr('defaultValue')). if (e;val() == '') { e.addClass('formerize-placeholder'). e;val(e;attr('placeholder')): } break. default. e;val(e;attr('defaultValue')); break. } }). window;setTimeout(function() { for (x in _fakes) _fakes[x],trigger('formerize_sync'); }; 10); }); return _form. }; $form.n33_formerize(). } } // Dropdowns: $('#nav > ul'),dropotron({ offsetY: -15; hoverDelay; 0 }); }); })(jQuery);

Answer 1

You can use Object.keys for get array of breakpoints item, then you can appendChild to document.head

So, write code like this:

const item = {
    reset: 'full',
    breakpoints: {
        global:     { range: '*', rel: 'preload', href: 'css/style.css', containers: 1400, grid: { gutters: 50 } },
        wide:       { range: '-1680', rel: 'preload', href: 'css/style-wide.css', containers: 1200, grid: { gutters: 40 } },
        normal:     { range: '-1280', rel: 'preload', href: 'css/style-normal.css', containers: 960, lockViewport: true },
        narrow:     { range: '-980', rel: 'preload', href: 'css/style-narrow.css', containers: '95%', grid: { gutters: 30 } },
        narrower:   { range: '-840', rel: 'preload', href: 'css/style-narrower.css', grid: { gutters: 20, collapse: 1 } },
        mobile:     { range: '-640', rel: 'preload', href: 'css/style-mobile.css', grid: { gutters: 15, collapse: 2 } }
    }
}


Object.keys(item.breakpoints).forEach(key=>{
  var res = document.createElement("link"); 
  res.rel = item.breakpoints[key].rel; 
  res.as = "style";
  res.href = item.breakpoints[key].href;
  document.head.appendChild(res)
})

See in playground: https://jsfiddle.net/denisstukalov/3euofv17/#&togetherjs=RqKywyBFh0