Home  >  Article  >  Backend Development  >  javascript - 关于网站换皮肤的功能,谁可以告诉下mac.pcbeta.com 它的换肤原理?

javascript - 关于网站换皮肤的功能,谁可以告诉下mac.pcbeta.com 它的换肤原理?

WBOY
WBOYOriginal
2016-06-06 20:51:221105browse

一直想实现mac.pcbeta.com 的皮肤功能。
最近写了一个JS 来实现,将用户设置的皮肤名字保存在localstorage ,每次刷新页面的时候去调用保存在localstorage 中的字段,然后根据字段引用新的皮肤所包含的CSS文件。
但是写完之后发现,虽然能够实现,但是用户每次刷新的时候都需要执行这个脚本,会不会很耗资源?
其实耗资源还是小事,最重要是在脚本运行前,网页的皮肤最先是默认的,没有引入新的CSS 文件的,但执行后网页界面才改变。

这样一来,每次刷新页面的时候,都会出现一次闪过的白屏。(默认皮肤为白色,设置使用的皮肤为其他颜色),很不舒服。

那么mac.pcbeta.com他们是怎么实现的?

我看到他们每次换皮肤的时候都会刷新页面,并且提交一个?styleid=34,然后服务器获取到这个styleid 之后用后端脚本插入?具体要怎么实现?还要指定知道是哪个访客设置的皮肤

回复内容:

一直想实现mac.pcbeta.com 的皮肤功能。
最近写了一个JS 来实现,将用户设置的皮肤名字保存在localstorage ,每次刷新页面的时候去调用保存在localstorage 中的字段,然后根据字段引用新的皮肤所包含的CSS文件。
但是写完之后发现,虽然能够实现,但是用户每次刷新的时候都需要执行这个脚本,会不会很耗资源?
其实耗资源还是小事,最重要是在脚本运行前,网页的皮肤最先是默认的,没有引入新的CSS 文件的,但执行后网页界面才改变。

这样一来,每次刷新页面的时候,都会出现一次闪过的白屏。(默认皮肤为白色,设置使用的皮肤为其他颜色),很不舒服。

那么mac.pcbeta.com他们是怎么实现的?

我看到他们每次换皮肤的时候都会刷新页面,并且提交一个?styleid=34,然后服务器获取到这个styleid 之后用后端脚本插入?具体要怎么实现?还要指定知道是哪个访客设置的皮肤

你可以写成这样

if styleid="black"
	<link href="black.css">
elseif styleid="red"
	<link href="red.css">
else
	<link href="common.css">

或者这样

styleid = isset(styleid) ? styleid : 'common';
<link href="%7Bstyleid%7D.css">

不过,mac.pcbeta.com也是要跳页面啊。。在某些浏览器上也是会白一下的。。

javascript - 关于网站换皮肤的功能,谁可以告诉下mac.pcbeta.com 它的换肤原理?

抓取下这个网站,
1.运行index.php, get参数styleid = 29
2.获取指定的js和css和对应的图片.

它页面也刷新. 就是在index.php一个里对参数的的判断. 参数对应不同的css和js变量.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn