How to preload large css and javascript files in vanilla javascript

Question

I'm building a single page application that's going to run on tablets in areas of the world that have slow connections with poor bandwidth.

Because the javascript files and css files are quite big, the css file is 250kb and the main js file is 750kb at the moment, I'm looking for a best practice to preload the css and javascript files without having to first load libraries such as JQuery first.

So in short: What is a good way to preload css and js files without 3rd party libraries and have some sort of callback once all the files are loaded

those are pretty huge for css/js, have you compressed them yet? — Pixelomo
– Pixelomo, Commented Aug 27, 2015 at 8:03
This answer may help stackoverflow.com/questions/6806849/… — Pixelomo
– Pixelomo, Commented Aug 27, 2015 at 8:05

wf4 · Accepted Answer · 2015-08-27 08:12:17Z

2

Create an inline html/css preloader which is shown by default.

Then using JavaScript you can use the document readyState to hide the preloader once everything is downloaded:

document.onreadystatechange = function () {

// check the value - if it's 'complete' then everything has loaded
if (document.readyState === "complete") {
    // add code here
    // alert('everything has downloaded!')
    // e.g. preloader.style.display = 'none';   
    }
}

This is the equivalent to the $(window).load() you would use in jQuery.

edited Aug 27, 2015 at 8:12

answered Aug 27, 2015 at 8:06

wf4

3,8372 gold badges38 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matías Fidemraizer · Accepted Answer · 2015-08-27 08:05:18Z

1

[...] having to first load libraries such as JQuery first.

What you want to achieve can be done without libraries or frameworks (actually they still use vanilla JS under the hoods), anyway, science moves on when everyone don't try to re-invent the wheel every day.

There're simple but yet powerful libraries that have a very small footprint that are just there to asynchronously-loading JavaScript and CSS files that work like a charm.

For example, HeadJS is a 1.9KB library and it can solve your issue:

head.load("myfile1.js", "myfile2.js", "mystyles.css", function() {
   // Do stuff once they got loaded!
});

answered Aug 27, 2015 at 8:05

Matías Fidemraizer

65.1k19 gold badges132 silver badges216 bronze badges

Collectives™ on Stack Overflow

How to preload large css and javascript files in vanilla javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related