Как предварительно загрузить большие файлы css и javascript в vanilla javascript

Question

Я создаю одностраничное приложение, которое будет запускаться на планшетах в районах мира с медленными соединениями с плохой пропускной способностью.

Поскольку файлы javascript и файлы css довольно большие, файл css составляет 250kb, а основной файл js - 750kb, я ищу наилучшую практику предварительной загрузки файлов css и javascript без необходимости сначала сначала загрузите библиотеки, такие как JQuery.

Так короче: Что такое хороший способ для предварительной загрузки CSS и JS файлы без библиотек 3 участника и иметь какой-то обратный вызов, когда все файлы загружены

Answer 1

[...] того, чтобы при первой загрузке библиотеки, такие как JQuery.

То, что вы хотите достичь может быть сделано без библиотек или рамок (на самом деле они все еще используют ваниль JS под капюшонами), во всяком случае, наука движется относительно того, когда все не пытаться заново изобретать колесо каждый день.

Существуют простые, но все же мощные библиотеки, которые имеют очень малую площадь, которые находятся там, чтобы асинхронно загружать файлы JavaScript и CSS, которые работают как шарм.

Например, HeadJS библиотека 1.9KB и он может решить проблему:

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

Answer 2

Создать учетную прелоадер рядный HTML/CSS, который показан по умолчанию.

Затем с помощью JavaScript вы можете использовать документ readyState, чтобы скрыть прелоадер сразу все скачивается:

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'; 
    } 
} 

Это эквивалентно $(window).load() вы будете использовать в JQuery.