網(wǎng)頁換膚是一門老技術(shù)了，老的現(xiàn)在都不怎么流行了。但是，有時候有些客戶就是想要這個換膚功能。于是就實踐做了一下網(wǎng)頁換膚，結(jié)果遇到了很多問題。

網(wǎng)頁換膚的基本原理

基本原理很簡單，就是使用 JS 切換對應(yīng)的 CSS 樣式表。例如導(dǎo)航網(wǎng)站 Hao123 的右上方就有網(wǎng)頁換膚功能。除了切換 CSS 樣式表文件之外，通常的網(wǎng)頁換膚還需要通過 Cookie 來記錄用戶之前更換過的皮膚，這樣下次用戶訪問的時候，就可以自動使用上次用戶配置的選項。

那么基本工作流程就出來了：訪問網(wǎng)頁——JS 讀取 Cookie ——如果沒有，使用默認(rèn)皮膚——如果有，使用指定皮膚；用戶點擊換膚選項——JS 控制替換對應(yīng)的 CSS 樣式表——將皮膚選項寫進(jìn) Cookie 保存。

網(wǎng)頁換膚事先需要的準(zhǔn)備

首先你可能要準(zhǔn)備多套 CSS 樣式表文件，當(dāng)點擊換膚按鈕的是，使用 JS 來切換對應(yīng)的 CSS 樣式表。之后，就是在網(wǎng)頁上增加一個 ul li 列表，用 CSS 修飾一下做成換膚選項。例如：

下面我們就來看具體功能代碼。

實現(xiàn)點擊切換對應(yīng) CSS 功能

首先，我們的皮膚選項的 HTML 結(jié)構(gòu)是這樣的

<div class=”skin”>
  <ul>
    <li class=”skin1 hover”></li>
    <li class=”skin2”></li>
    <li class=”skin3”></li>
    <li class=”skin4”></li>
  </ul>
</div>

然后在網(wǎng)頁的頂部偏下的位置放上一個空的 link 標(biāo)簽，我們將會使用 jQuery 為這個 link 標(biāo)簽賦予不同的 CSS 文件實現(xiàn)切換效果

其中，我自定義了一個 data-href 屬性來存放系統(tǒng)默認(rèn)的皮膚，這樣當(dāng)頁面加載完成之后，如果 JS 沒有檢測到 Cookie 中的皮膚信息，就會把 data-href 中的內(nèi)容賦值上去。之后就是大家熟悉的 jQuery 代碼：

jQuery(‘.skin li').click(function(){
  var currentClass = jQuery(this).attr(‘class');
  jQuery(this).siblings().removeClass(‘hover');
  jQuery(this).addClass(‘hover');
  var cc = currentClass.substring(0,5);
  cc = convertcsslittle(cc);
  var skincssurl = jQuery(‘.stylecssurl').attr(‘href').substring(0,jQuery(‘.stylecssurl').attr(‘href').indexOf(‘style')) + cc;
  jQuery(‘.skincsslittle').attr(“href”,skincssurl);
createCookie('skin',currentClass,365);
});

大體的邏輯就是獲取到當(dāng)前皮膚的 class 然后截取出來 skin* 然后通過一個函數(shù)得到其對應(yīng)的 CSS 文件。skincssurl 記載的是網(wǎng)頁的非皮膚 CSS 文件，主要用來獲取當(dāng)前網(wǎng)頁的 CSS 目錄 URL ，最后將混合好的 CSS 皮膚文件賦值準(zhǔn)備好的空 link 中，實現(xiàn)換膚。

增加 Cookie 記錄皮膚功能

這里主要用到兩個自定義的函數(shù)，用來創(chuàng)建、讀取 Cookie 內(nèi)容。

function readCookie(name) {
 var nameEQ = name + “=”;
 var ca = document.cookie.split(‘;');
 for(var i=0;i < ca.length;i++) {
  var c = ca[i];
  while (c.charAt(0)==' ‘) c = c.substring(1,c.length);
  if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
 }
 return false;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days2460601000));
var expires = “; expires=”+date.toGMTString();
}
else expires = “”;
document.cookie = name+”=”+value+expires+”; path=/“;
}

你只需要把這兩個函數(shù)復(fù)制到 JS 代碼區(qū)域即可。在 jQuery 點擊換膚的功能代碼中，最后一句就創(chuàng)建了一個 Cookie，等網(wǎng)頁加載完成之后，我們需要使用 JS 讀取 Cookie 內(nèi)容，然后使用 if 判斷：

var cccc = readCookie(“skin”);
if (cccc){
cccc = cccc.substring(0,5);
jQuery(‘.'+cccc).addClass(‘hover').siblings().removeClass(‘hover');
ccc = convertcsslittle(cccc);
var skincssurl = jQuery(‘.stylecssurl').attr(‘href').substring(0,jQuery(‘.stylecssurl').attr(‘href').indexOf(‘style')) + ccc;
jQuery(‘.skincsslittle').attr(“href”,skincssurl);
}else{
var currentcss = jQuery(‘.skincsslittle').attr(“data-href”);
var currentcssname = currentcss.substring(currentcss.indexOf(‘style'),currentcss.length);
currentcssname = defaulttoclass(currentcssname);
jQuery(‘.'+currentcssname).addClass(‘hover').siblings().removeClass(‘hover');
jQuery(‘.skincsslittle').attr(“href”,jQuery(‘.skincsslittle').attr(“data-href”));
}

不要被這么亂的代碼嚇暈了，實際上邏輯很簡單，先獲取 Cookie 的皮膚值，如果有就為對應(yīng)的皮膚選項高亮并且轉(zhuǎn)換得到對應(yīng)的 CSS 皮膚文件賦值。如果沒有 Cookie 內(nèi)容，就將 data-href 屬性中記錄的值賦值進(jìn)去。

網(wǎng)頁換膚的閃爍問題和不完美解決方案

網(wǎng)頁換膚中，會遇到閃爍的問題。就是當(dāng)點擊切換按鈕的時候，更換顏色或者圖片會閃爍一下?；蛘呤褂?Cookie 記錄之后，用戶使用了非默認(rèn)的皮膚，也會閃爍一下，先出現(xiàn)默認(rèn)的樣式然后再閃爍切換成用戶自己選擇的樣式。

這種影響用戶體驗的現(xiàn)象肯定要徹底消滅，但是一直沒有找到完美的解決方法。因為瀏覽器默認(rèn)的是優(yōu)先渲染 CSS 之后再加載 JS，特別是使用 Cookie 記錄的皮膚，先渲染現(xiàn)有的 CSS 之后，JS 才能讀取然后切換到皮膚。原理是這樣的，跟客戶協(xié)商之后，客戶給出了一個“無閃爍”的換膚效果示例，是 MG12 很早的一款主題。同樣的 Cookie 記錄等，但是他的作品確實沒有閃爍情況。

于是我就查看了他的 JS 代碼，沒有發(fā)現(xiàn)特殊之處，后來才想明白，這種閃爍問題，在圖片比較多的網(wǎng)頁中效果尤其明顯，因為切換的 CSS 需要加載圖片需要更多時間。而 MG12 那款主題中，切換的 CSS 文件只是改變了幾個 background 顏色，加載速度快到你眼球反應(yīng)不過來就造成了不閃爍的假象。

不完美解決方案也是有的，點擊切換按鈕之后的閃爍情況，也是因為要加載圖片等，那么我們可以在訪問網(wǎng)頁的時候，使用預(yù)加載技術(shù)將其他皮膚圖片預(yù)加載或者使用 CSS Sprite 技術(shù)做成一張大圖片。

至于 Cookie 記錄閃爍的問題，這是瀏覽器渲染的硬傷，只能盡量減少換膚需要改變的地方，盡量壓縮圖片減小體積。然后優(yōu)先加載沒有任何皮膚的基礎(chǔ)樣式，之后使用 JS 加載默認(rèn)樣式或者讀取 Cookie 獲取的皮膚選項。這樣處理，訪問網(wǎng)頁的時候會先顯示白色或者無顏色，之后直接切換成之前選擇的皮膚的顏色，而不會從默認(rèn)的顏色閃爍變成另一種顏色從而提升一定的用戶體驗。

最新評論