Современная асинхронная загрузка CSS
Самый простой способ загрузить CSS в HTML-документ заключается в использовании тега link и атрибута rel=»stylesheet»:
Но есть и обратная сторона медали: это происходит синхронно. Другими словами, браузер останавливает рендеринг остальных частей страницы в процессе запроса, загрузки и парсинга файла. Это необходимо, чтобы браузер не начал отображать содержимое веб-страницы до того, как загрузится CSS. Но не все стили настолько критичны, чтобы задерживать доступ к контенту. Для этого необходимо загружать некритичные CSS файлы асинхронно, без блокировки рендеринга страницы.
Способы асинхронной загрузки CSS
Существует несколько способов заставить браузер загружать CSS асинхронно.
Первый способ (работает в современных браузерах) заключается в использовании JavaScript для создания и вставки ссылки на файл CSS в DOM:
// Создаем ссылку на таблицу стилей var myCSS = document.createElement( "link" ); myCSS.rel = "stylesheet"; myCSS.href = "mystyles.css"; // вставляем ее в конце блока head document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );
Второй способ заключается в том, чтобы задать атрибуту media в теге link значение, которое не соответствует устройству пользователя. Например, media=»print».
В результате браузеры будут воспринимать стили для неиспользуемых устройств как низкоприоритетные. Поэтому они будут загружать стили, не блокируя рендеринг страницы.
Но чтобы задействовать асинхронно загруженные стили, нужно использовать JavaScript-обработчик события onload. Это позволит изменить значение media на соответствующее браузеру и устройству пользователя. Например, screen или all:
Примечание: мы используем комбинацию перечисленных выше приемов в библиотеке loadCSS.js, предназначенной для обработки асинхронной загрузки CSS. А также обходные пути для устаревших версий браузеров, которые не поддерживают события onload в элементах link.
Также можно загружать CSS асинхронно, используя значение rel=»alternate stylesheet». Оно используется для того, чтобы предложить пользователю альтернативное представление сайта:
Методы, описанные выше, работают. Но у них есть один общий недостаток: они используют JavaScript.
Современный метод
Существует решение, созданное специально для асинхронной загрузки CSS файлов: rel=»preload» . Но даже этот вариант использует обработчик события onload.
Ниже приведен использования rel=»preload»:
Значение атрибута rel=»preload» заставляет браузеры (которые его поддерживают) загружать, но не применять указанный файл. Поэтому необходим обработчик события onload, чтобы установить атрибут rel в значение stylesheet после загрузки.
Вариант с rel=»preload» имеет одно важное преимущество: браузеры начнут загружать CSS раньше, чем при использовании подхода с несоответствующим значением атрибута media.
Использование rel=preload c loadCSS
Поддержка rel=»preload» браузерами , ну… спасибо, что хотя бы Google Chrome его поддерживает. Другие популярные браузеры находятся на пути к этому.
Но мы можем обеспечить поддержку rel = ‘preload’ с помощью полифиллов. Проект loadCSS предлагает скрипт cssrelpreload.js , который заставляет rel=»preload» работать в браузерах, которые не поддерживают его по умолчанию.
Пошаговое руководство по использованию cssrelpreload.js можно найти в readme проекта . Ниже приведен пример применения скрипта:
loadCSS можно найти на Github и NPM .
Ангелина Писанюк автор-переводчик статьи « Modern Asynchronous CSS Loading »
Пожалуйста, оставьте ваши комментарии по текущей теме статьи. За комментарии, отклики, дизлайки, лайки, подписки низкий вам поклон!
Transitions Only After Page Load
Worked pretty well. It would be nice to be able to prevent or trigger animations/transitions on page load without JavaScript, but alas.
Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.
Comments
Nice 🙂 and just 10+ lines of code. Thanks a lot. BTW, you might need an AJAX loader to indicate the fact that page is loading. You can get it from http://preloaders.net
The other option is if you’re using typekit, which who isn’t these days? Then you can use the prexisting classes the it applies to the body, such as wf-loading or wf-active and some CSS to show a loading spinner when the page isn’t fully rendered, so you’re killing two birds with the same stone, both preventing FOUT and preserving animations. Of you want some examples checkout Dan Edens site for some awesome examples of both animations and gorgeous typefaces, plus he’s the creator of the incredibly amazing animate.css
I do not know exactly whether to put the CSS in the bottom of the page is valid or not. But I think we can put transition at the end of the page so that at least the effect of the transition can be initiated when the page is quite ready:
One note: Some browsers don’t understand none in the transition property. I’ve had to use transition:all 0s linear; (with prefixes) to make it go away completely.
Hi Chris, I am using the same effect to fade in the content on my site on page load, however instead of removing a class from body, I just add it (“.loaded”). This way, I can trigger such effects on various elements on the page. So, by default, we have:
You can see the effect here: http://betterhtml.com I think there is no difference between our approaches, since the final outcome is the same.
Hi Farzin, Good question. You can’t use transitions on the visibility, as it can’t be animated. It has just the 2 states: visible or hidden. That’s why you need to use the opacity.
Nice, I like that. I worked at a terribly over-thought solution for this in a project and it’s nice to see it can be handled much easier #bookmarked!
Why don’t you do the opposite? Meaning, have all the transitions in a separate CSS selection: Body.loaded .element < transition-1: xyz;>Then add the loaded class when the Dom is ready.
Possibly stating the obvious but this means that if you haven’t got js enabled you don’t get any fancy transitions. Maybe it would be worth adding the class to the body in js?
There is a typo with the very first word of the article. I think you meant “If you’ve…” not “I’ve you’ve…”
You should have added Narration too. I was confused initially about what is the issue.
Thanks for sharing even I’m facing similar issue 🙂
Another example of why we should never have started titting around animating things with CSS. Of course, people with a following who are incapable or unwilling to learn the pre-existing tools for doing so have managed to “trend” enough momentum behind this silly movement now that it’s a probably too late to reverse.
Chris, excellent post, I did notice the initial effect on the frog, clever, I am still excited about where CSS is headed, keep up the good work
I’m pretty green to CSS, but I have to say that between your blog and Treehouse my knowledge has grown 10 fold in a mere month.
You could so something like http://jsfiddle.net/PEEKt/ You can pass in an additional (fourth) argument to delay your desired effect. The only thing I would say to be wary of is images. If your app/site has images then the two second delay may not be enough. The effect will still run while the image is being downloaded. Or even users on slower connections. So ‘could’ be worth using this after the load event is fired. Just another way of doing it.
Hi
Excellent article as usual, but even It’s the article I needed in just this moment.
I have done a small css3 animation and It’s triggered before the complete page is loaded. I tried to add your jquery code, but I think I need a bit jquery for dummies (It’s the first time I add jquery code, sorry).
I added the jquery to head and class ‘preload’ to body tag: ” (…) $(“window”).load(function() $(“body”).removeClass(“preload”);
>); (…)” However the tag ‘preload’ is not removed.
I think I have done wrong the way to link jquery library or the way of calling jquery function, but I dont’ see it now. Any help? Many thanks.
Sorry, the coded I quoted maybe It’s removed by spam.
The jquery library I added is version 3.2.2 from googleaplis.
Современная асинхронная загрузка CSS
Самый простой способ загрузить CSS в HTML-документ заключается в использовании тега link и атрибута rel=»stylesheet»:
Но есть и обратная сторона медали: это происходит синхронно. Другими словами, браузер останавливает рендеринг остальных частей страницы в процессе запроса, загрузки и парсинга файла. Это необходимо, чтобы браузер не начал отображать содержимое веб-страницы до того, как загрузится CSS. Но не все стили настолько критичны, чтобы задерживать доступ к контенту. Для этого необходимо загружать некритичные CSS файлы асинхронно, без блокировки рендеринга страницы.
Способы асинхронной загрузки CSS
Существует несколько способов заставить браузер загружать CSS асинхронно.
Первый способ (работает в современных браузерах) заключается в использовании JavaScript для создания и вставки ссылки на файл CSS в DOM:
// Создаем ссылку на таблицу стилей var myCSS = document.createElement( "link" ); myCSS.rel = "stylesheet"; myCSS.href = "mystyles.css"; // вставляем ее в конце блока head document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );
Второй способ заключается в том, чтобы задать атрибуту media в теге link значение, которое не соответствует устройству пользователя. Например, media=»print».
В результате браузеры будут воспринимать стили для неиспользуемых устройств как низкоприоритетные. Поэтому они будут загружать стили, не блокируя рендеринг страницы.
Но чтобы задействовать асинхронно загруженные стили, нужно использовать JavaScript-обработчик события onload. Это позволит изменить значение media на соответствующее браузеру и устройству пользователя. Например, screen или all:
Примечание: мы используем комбинацию перечисленных выше приемов в библиотеке loadCSS.js, предназначенной для обработки асинхронной загрузки CSS. А также обходные пути для устаревших версий браузеров, которые не поддерживают события onload в элементах link.
Также можно загружать CSS асинхронно, используя значение rel=»alternate stylesheet». Оно используется для того, чтобы предложить пользователю альтернативное представление сайта:
Методы, описанные выше, работают. Но у них есть один общий недостаток: они используют JavaScript.
Современный метод
Существует решение, созданное специально для асинхронной загрузки CSS файлов: rel=»preload» . Но даже этот вариант использует обработчик события onload.
Ниже приведен использования rel=»preload»:
Значение атрибута rel=»preload» заставляет браузеры (которые его поддерживают) загружать, но не применять указанный файл. Поэтому необходим обработчик события onload, чтобы установить атрибут rel в значение stylesheet после загрузки.
Вариант с rel=»preload» имеет одно важное преимущество: браузеры начнут загружать CSS раньше, чем при использовании подхода с несоответствующим значением атрибута media.
Использование rel=preload c loadCSS
Поддержка rel=»preload» браузерами , ну… спасибо, что хотя бы Google Chrome его поддерживает. Другие популярные браузеры находятся на пути к этому.
Но мы можем обеспечить поддержку rel = ‘preload’ с помощью полифиллов. Проект loadCSS предлагает скрипт cssrelpreload.js , который заставляет rel=»preload» работать в браузерах, которые не поддерживают его по умолчанию.
Пошаговое руководство по использованию cssrelpreload.js можно найти в readme проекта . Ниже приведен пример применения скрипта:
loadCSS можно найти на Github и NPM .
Ангелина Писанюк автор-переводчик статьи « Modern Asynchronous CSS Loading »
Пожалуйста, оставьте ваши комментарии по текущей теме статьи. За комментарии, отклики, дизлайки, лайки, подписки низкий вам поклон!