Javascript smoothState.js-不同页面上的不同样式表？
Javascript smoothState.js-不同页面上的不同样式表？,javascript,jquery,css,smoothstate.js,Javascript,Jquery,Css,Smoothstate.js,我目前正在尝试在我的网站上实现smoothState.js。然而，我在页面之间转换时遇到了一个问题 问题是新内容“未设置样式”（更准确地说，它是使用上一页的样式设置的）。由于我一直非常关注这个网站的性能，我更希望有一种方法可以避免组合样式表 我已经考虑过如何解决这个问题，但无法决定哪种解决方案对性能的影响最小。这些是我能想到的可能的解决办法 1。组合样式表 尽管我不愿意这样做，但这可能是最好的办法。毕竟，这只是几个额外的字节，对吗？毕竟，样式表（缩小和压缩）非常小 2。将javascript函数
我目前正在尝试在我的网站上实现smoothState.js。然而，我在页面之间转换时遇到了一个问题 问题是新内容“未设置样式”（更准确地说，它是使用上一页的样式设置的）。由于我一直非常关注这个网站的性能，我更希望有一种方法可以避免组合样式表 我已经考虑过如何解决这个问题，但无法决定哪种解决方案对性能的影响最小。这些是我能想到的可能的解决办法 1。组合样式表
尽管我不愿意这样做，但这可能是最好的办法。毕竟，这只是几个额外的字节，对吗？毕竟，样式表（缩小和压缩）非常小 2。将javascript函数添加到正文中
对于smoothState，我当前使用主体作为容器。例如，我想我可以直接在body标记之后添加以下javascript
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);
'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);