Я в настоящее время пытаюсь реализовать smoothState.js на своем сайте. Однако я сталкиваюсь с проблемой при переходе между страницами.smoothState.js - Различные таблицы стилей на разных страницах?
Проблема в том, что новый контент является «незакрепленным» (точнее говоря, он стилизован со стилями предыдущей страницы). Поскольку я уделял большое внимание производительности на этом сайте, я бы предпочел, чтобы был способ избежать объединения таблиц стилей.
Я немного подумал о том, как решить эту проблему, но не может решить, какое из решений будет иметь наименьшее влияние на производительность. Это возможные решения, о которых я мог думать.
1. Объединить таблицы стилей
Несмотря на меня не желая, чтобы сделать это, это может быть лучшим способом. В конце концов, это всего лишь несколько лишних байтов, верно? Таблицы стилей (minified и gzipped) совсем невелики.
2. Добавьте яваскрипт функцию тела
Для smoothState, я в настоящее время использую тело в качестве контейнера. Я предполагаю, что я мог бы, например, добавить следующий javascript непосредственно после тега body.
var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = 'css/single.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);
(я бы модифицировать выше, поскольку document.load не запускается при смене страниц с smoothState. К сожалению, я совершенно ужасен в ванильным JS. Но я думаю, я могу понять это. .. Не большая проблема :))
3. у некоторых яваскрипта магии в onStart.render() из smoothstate() в-третьих, и, наконец, я понимаю, что это было бы правдоподобно, чтобы запустить некоторые JavaScript чтобы получить таблицу стилей целевой страницы и добавить ее в новую. Мой инстинкт подсказывает мне, что это будет менее эффективная производительность, чем просто объединение таблиц стилей ...
В случае, если это поможет, я включу функцию smoothState ниже.
'use strict';
var $body = $('html, body'),
content = $('#main').smoothState({
prefetch: true,
pageCacheSize: 4,
development: true,
onStart: {
duration: 250,
render: function (url, $container) {
// #3 would be implemented here.
content.toggleAnimationClass('is-exiting');
$body.animate({
scrollTop: 0
});
}
},
onProgress : {
duration: 0,
render: function (url, $container) {
$body.css('cursor', 'wait');
$body.find('a').css('cursor', 'wait');
}
},
onEnd: {
duration: 250, // Duration of our animation
render: function (url, $container, $content) {
$body.css('cursor', 'auto');
$body.find('a').css('cursor', 'auto');
$container.html($content);
}
}
}).data('smoothState');
})(jQuery);
Можно ли предположить, какой из трех методов, предусмотренных будет иметь наименьшее влияние на загрузке страницы моих страниц, или предложить другой способ решения этой проблемы?
UPDATE 28/04/15 Я выбрал просто пойти с методом номер 1 и объединить таблицы стилей.