Как запустить функцию после завершения загрузки таблицы стилей CSS - PullRequest
Новая
       46

Как запустить функцию после завершения загрузки таблицы стилей CSS

0 голосов
/ 13 мая 2019

Как запустить функцию после завершения загрузки таблицы стилей?

Вот мой код .. 

var d = document,
    css = d.head.appendChild(d.createElement('link'))

css.rel = 'stylesheet';
css.type = 'text/css';
css.href = "https://unpkg.com/tachyons@4.10.0/css/tachyons.css"

Ответы [ 2 ]

1 голос
/ 13 мая 2019

Согласно MDN : элемент ссылки на внешний ресурс ,

Вы можете определить, когда таблица стилей была загружена, наблюдая за событием load, которое должно сработать; аналогично, вы можете определить, произошла ли ошибка при обработке таблицы стилей, наблюдая за событием error: 

<script>
var myStylesheet = document.querySelector('#my-stylesheet');

myStylesheet.onload = function() {
  // Do something interesting; the sheet has been loaded
}

myStylesheet.onerror = function() {
  console.log("An error occurred loading the stylesheet!");
}
</script>

<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet">

Примечание. Событие load запускается после загрузки и анализа таблицы стилей и всего импортированного содержимого и непосредственно перед применением стилей к содержимому.

0 голосов
/ 13 мая 2019

Это кросс-браузерное решение, оптимизированное для современных браузеров, поддерживающих CSS onload .Он работает в 2011 году, когда только Opera и Internet Explorer поддерживали события onload и onreadystatechange соответственно на css.См. Ссылку ниже. 

var d = document,
    css = d.head.appendChild(d.createElement('link')),
    src = "https://unpkg.com/tachyons@4.10.0/css/tachyons.css"

css.rel = 'stylesheet';
css.type = 'text/css';
css.href = src

Добавьте это после загрузчика 

if (typeof css.onload != 'undefined') css.onload = myFun;
else {
    var img = d.createElement("img");
    img.onerror = function() {
      myFun();
      d.body.removeChild(img);
    }
    d.body.appendChild(img);
    img.src = src;
}

function myFun() {
    /* ..... CONTINUE CODE HERE ..... */
}

Ответ основан на этой ссылке , которая говорит:

За кулисами происходит то, что браузер пытается загрузить CSS в элемент img и, поскольку таблица стилей не является типом изображения, элемент img выбрасывает onerror событие и выполняет нашу функцию.К счастью, браузеры загружают весь файл CSS перед тем, как определить, что это не изображение, и запустить событие onerror .

...