Я пытаюсь заставить страницы загружаться быстрее, включая встроенный CSS для кода выше сгиба. Это работает для страниц, хранящихся в корневом каталоге, но у меня есть проблема с загрузкой остальной части файла CSS в конце страниц, которые находятся в подпапках (т.е. http://example.com/other/index.html).
Если текущий файл находится в корневой папке, следующий код работает нормально:
<script>var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = 'css/a1tg2.css';
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);</script>
но если текущий файл находится в подпапке, следующий код не работает:
<script>var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = '../css/a1tg2.css';
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);</script>
Кроме того, если я пытаюсь абсолютный путь, он также не работает:
<script>var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = 'http://example.com/css/a1tg2.css';
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);</script>
Относительное расположение файла является правильным, потому что, если у меня есть следующая строка в заголовке документа:
<link href="../css/a1tg2.css" rel="stylesheet" type="text/css">
Это также хорошо работает, но я не хочу использовать это, поскольку это замедляет рендеринг страницы. Я не разбираюсь в JavaScript, просто получаю код, требуемый от генератора CSS критического пути в Интернете. Может кто-нибудь предложить решение, пожалуйста, так как ни один из подобных вопросов на этом сайте не имеет удовлетворительного ответа.
проверьте ссылку созданного HTML-файла и используйте путь относительно этой страницы.
Например: если ваша структура каталогов:
- css
- a1tg2.css
- pages
- header.php
- footer.php
- index.php
Если вы включаете header.php в index.php, относительный путь к файлу css в header.php должен быть css / a1tg2.css, а не ../css/a1tg2.css
Других решений пока нет …