无延迟css换肤方案

要实现前端换肤,大部分程序猿的思路无外乎下面两种:

1.通过全局class名称,切换全局类名称实现换肤;

2.通过js更改link标签的href进行加载不同的css文件。

但是,方法1的方案比较繁琐,全局class控制样式会提高全局样式优先级,如果换肤样式很多,代码会非常啰嗦,不利于维护;方法2通过js更改href时,会重新下载href指向的css文件,多个文件会有延迟,导致样式有个过度状态,用户体验不美丽。

下面介绍方法3,可以完美解决延迟问题。

实现原理

利用link标签的rel属性进行切换css渲染。首先,我们的css文件是这样引进的:

<link href='./css/blue.css' rel='stylesheet' type='text/css' id='blueStyle'></link>

上述语句中的rel属性设置为'stylesheet',当页面加载完成后,引入的该css文件会立即渲染页面。要想切换皮肤主题,我们要的效果是下载一个css文件作为备用,但是不要立即渲染页面,当用户点击换肤时,css文件才去渲染。怎样才能达到这样的效果呢,这就是我们方案三的关键点:把rel属性设置为'alternate stylesheet';

<link href='./css/red.css' rel='alternate stylesheet' type='text/css' id='redStyle'></link>

上述red.css文件由于在rel属性中加入了'alternate' 属性,加载完成后,该css不会渲染页面。这就达到了加载css文件但不渲染页面的目的。

至此,我们页面存在两个css文件,但是只有blue.css渲染了页面。当用户点击换肤时,我们在来切换两个css,选择对应的css文件进行渲染,就达到了我们换肤的效果,并且两个css文件都是预加载的,不会产生延迟。

切换方式

通过切换rel为'alternate stylesheet'和'stylesheet'进行不同css文件的渲染,比如,要加载red.css:

//加载red.css
redStyle.setAttribute('rel','stylesheet');
redStyle.disabled = false;

//卸载blue.css渲染,
blueStyle.setAttribute('rel','alternate stylesheet');
blueStyle.disabled = true;

通过上述语句,即可以实现red.css文件的渲染和blue.css的卸载。

优缺点

1. chrome,火狐,IE9+等浏览器支持该方案

2. 用户体验更加美丽,不会出现js更改href时的延迟现象,实现无缝样式切换

3. 所有css样式都会预加载,当主题样式较多,css文件较多时初次全部加载可能会耗时

完整代码地址

github:https://github.com/jianfeng418/css-change-skin

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页

打赏

Jeff1804

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者