实现案例：
http://www.cityofsteam.com/game-play/classes
这个页面要求点击按钮，加载相关页面。之前做的是这样的代码
[code]
<div class="inraces">
<div class="centersuper">
<ul class="raceul" style="width:450px; margin:0px auto">
<li class="cat0 beforeli">Arcanist</li>
<li class="cat1">Gunner</li>
<li class="cat2">Warder</li>
<li class="cat3">Channeler</li>
</ul></div><div class="lon"><img src="/img/loading.gif" /></div>
<div id="cls">
</div>
</div>
<div><script>
var cls=jQuery.noConflict();
cls(document).ready(function(){
cls(".lon").ajaxStart(function(){
cls(this).show();
});
cls(".lon").ajaxStop(function(){
cls(this).hide();
Cufon.set(‘fontFamily’, ‘New Epoch’).replace (‘h1’);
});
var con = cls("#cls");
cls(window).load(function () {
con.load(‘/game-play/classes/arcanist #Arcanist’,function(){cls(this).hide(0);cls(this).fadeIn("slow");
unityObject.embedUnity("unityPlayer","http://test.cityofsteam.com/Uploads/test.unity3d",219,137);
});});
cls(".raceul .cat0").click(function(){
con.hide();
con.load(‘/game-play/classes/arcanist #Arcanist’,function(){cls(this).hide(0);cls(this).fadeIn("slow");
unityObject.embedUnity("unityPlayer","http://test.cityofsteam.com/Uploads/test.unity3d",219,137);
cls(".raceul li").removeClass("beforeli");
cls(".raceul li.cat0").addClass("beforeli");
});
});
cls(".raceul .cat1").click(function(){
con.hide();
con.load(‘/game-play/classes/gunner #Gunner’,function(){cls(this).hide(0);cls(this).fadeIn("slow");
cls(".raceul li").removeClass("beforeli");
cls(".raceul li.cat1").addClass("beforeli");
});
});
cls(".raceul .cat2").click(function(){
con.hide();
con.load(‘/game-play/classes/warder #Warder’,function(){cls(this).hide(0);cls(this).fadeIn("slow");
cls(".raceul li").removeClass("beforeli");
cls(".raceul li.cat2").addClass("beforeli");
});
});
cls(".raceul .cat3").click(function(){
con.hide();
con.load(‘/game-play/classes/channeler #Channeler’,function(){cls(this).hide(0);cls(this).fadeIn("slow");
cls(".raceul li").removeClass("beforeli");
cls(".raceul li.cat3").addClass("beforeli");
});
});
});
</script></div>
[/code]
上面代码实现点击后加载相关url的数据
由于服务器在国外，比较慢，所以加载时间比较长，问题就出现了。如果我重新按刚才已经按过的按钮
它还是需要重新加载
于是我想到了缓存。也查了很多资料。可是没有发先直接存储html的，也就是对象『』。
于是我把js代码做了下面修改
[code lang=”js”]
<script>
var cls=jQuery.noConflict();
cls(document).ready(function(){
cls(".lon").ajaxStart(function(){
cls(this).show();
});
cls(".lon").ajaxStop(function(){
cls(this).hide();
});//loading img
var con = cls("#cls");
var cachediv = cls(".clsss");
con.load(‘/game-play/classes/arcanist #Arcanist’,function(f){//打开页面首次加载
var catf = cls(f).find("#Arcanist");//把找到的#Arcanist赋值给catf
cachediv.data("cache",catf);//缓存起来
});
cls(".raceul .cat0").click(function(){//点击按钮
var cache =cachediv.data("cache");//缓存赋值给cache
if(cache==null)//判断缓存是否为空
{//为空则
con.html("");//清空当前页面上的html
con.load(‘/game-play/classes/arcanist #Arcanist’,function(f){//加载
var catf = cls(f).find("#Arcanist");
cachediv.data("cache",catf);//缓存
});
}else{//不为空则调用缓存
con.html(cachediv.data("cache"));
}
cls(".raceul li").removeClass("beforeli");
cls(".raceul li.cat0").addClass("beforeli");
});
cls(".raceul .cat1").click(function(){
var cache1 =cachediv.data("cache1");
if(cache1==null)
{
con.html("");
con.load(‘/game-play/classes/gunner #Gunner’,function(f){
var catf = cls(f).find("#Gunner");
cachediv.data("cache1",catf);
});
}else{
con.html(cachediv.data("cache1"));
}
cls(".raceul li").removeClass("beforeli");
cls(".raceul li.cat1").addClass("beforeli");
});
cls(".raceul .cat2").click(function(){
var cache2 =cachediv.data("cache2");
if(cache2==null)
{
con.html("");
con.load(‘/game-play/classes/warder #Warder’,function(f){
var catf = cls(f).find("#Warder");
cachediv.data("cache2",catf);
});
}else{
con.html(cachediv.data("cache2"));
}
cls(".raceul li").removeClass("beforeli");
cls(".raceul li.cat2").addClass("beforeli");
});
cls(".raceul .cat3").click(function(){
var cache3 =cachediv.data("cache3");
if(cache3==null)
{
con.html("");
con.load(‘/game-play/classes/channeler #Channeler’,function(f){
var catf = cls(f).find("#Channeler");
cachediv.data("cache3",catf);
});
}else{
con.html(cachediv.data("cache3"));
}
cls(".raceul li").removeClass("beforeli");
cls(".raceul li.cat3").addClass("beforeli");
});
});
</script>
[/code]
然后就实现了下载后缓存html数据
另一个页面的实例js：
查看实例：http://www.cityofsteam.com/game-play/races
[code lang=”js”]
var rac=jQuery.noConflict();
rac(document).ready(function(){
rac(".lon").ajaxStart(function(){
rac(this).show();
rac("#container").removeClass("linebg");
});
rac(".lon").ajaxStop(function(){
rac(this).hide();
rac("#container").addClass("linebg");
Cufon.set(‘fontFamily’, ‘New Epoch’).replace (‘h1’);
});
var con = rac("#racesscontent");
var cachediv = rac(".cachediv");
con.load(‘/game-play/races/heartlanders .gamerace’,function(f){
rac(this).hide(0);rac(this).show("slow");
var findl = rac(f).find(".gamerace");
cachediv.data("hcache",findl);
});
rac(".raceul .cat0").click(function(){
var hcache = cachediv.data("hcache");
if(hcache==null){
con.hide();
con.load(‘/game-play/races/heartlanders .gamerace’,function(f){
rac(this).hide(0);rac(this).show("slow");
var findl = rac(f).find(".gamerace");
cachediv.data("hcache",findl);
});
}else{
con.html(hcache).hide();
con.show("slow");
}
rac(".raceul li").removeClass("beforeli");
rac(".raceul li.cat0").addClass("beforeli");
});
rac(".raceul .cat1").click(function(){
var avcache = cachediv.data("avcache");
if(avcache==null){
con.hide();
con.load(‘/game-play/races/avens .gamerace’,function(f){
rac(this).hide(0);rac(this).show("slow");
var findl = rac(f).find(".gamerace");
cachediv.data("avcache",findl);
});
}else{
con.html(avcache).hide();
con.show("slow");
}
rac(".raceul li").removeClass("beforeli");
rac(".raceul li.cat1").addClass("beforeli");
});
rac(".raceul .cat2").click(function(){
var oscache = cachediv.data("oscache");
if(oscache==null){
con.hide();
con.load(‘/game-play/races/ostenians .gamerace’,function(f){
rac(this).hide(0);rac(this).show("slow");
var findl = rac(f).find(".gamerace");
cachediv.data("oscache",findl);
});
}else{
con.html(oscache).hide();
con.show("slow");
}
rac(".raceul li").removeClass("beforeli");
rac(".raceul li.cat2").addClass("beforeli");
});
rac(".raceul .cat3").click(function(){
var stcache = cachediv.data("stcache");
if(stcache==null){
con.hide();
con.load(‘/game-play/races/stoigmari .gamerace’,function(f){
rac(this).hide(0);rac(this).show("slow");
var findl = rac(f).find(".gamerace");
cachediv.data("stcache",findl);
});
}else{
con.html(stcache).hide();
con.show("slow");
}
rac(".raceul li").removeClass("beforeli");
rac(".raceul li.cat3").addClass("beforeli");
});
rac(".raceul .cat4").click(function(){
var dwcache = cachediv.data("dwcache");
if(dwcache==null){
con.hide();
con.load(‘/game-play/races/dwarves .gamerace’,function(f){
rac(this).hide(0);rac(this).show("slow");
var findl = rac(f).find(".gamerace");
cachediv.data("dwcache",findl);
});
}else{
con.html(dwcache).hide();
con.show("slow");
}
rac(".raceul li").removeClass("beforeli");
rac(".raceul li.cat4").addClass("beforeli");
});
rac(".raceul .cat5").click(function(){
var drcache = cachediv.data("drcache");
if(drcache==null){
con.hide();
con.load(‘/game-play/races/draug .gamerace’,function(f){
rac(this).hide(0);rac(this).show("slow");
var findl = rac(f).find(".gamerace");
cachediv.data("drcache",findl);
});
}else{
con.html(drcache).hide();
con.show("slow");
}
rac(".raceul li").removeClass("beforeli");
rac(".raceul li.cat5").addClass("beforeli");
});
rac(".raceul .cat6").click(function(){
var ricache = cachediv.data("ricache");
if(ricache==null){
con.hide();
con.load(‘/game-play/races/riven .gamerace’,function(f){
rac(this).hide(0);rac(this).show("slow");
var findl = rac(f).find(".gamerace");
cachediv.data("ricache",findl);
});
}else{
con.html(ricache).hide();
con.show("slow");
}
rac(".raceul li").removeClass("beforeli");
rac(".raceul li.cat6").addClass("beforeli");
});
rac(".raceul .cat7").click(function(){
var gocache = cachediv.data("gocache");
if(gocache==null){
con.hide();
con.load(‘/game-play/races/goblins .gamerace’,function(f){
rac(this).hide(0);rac(this).show("slow");
var findl = rac(f).find(".gamerace");
cachediv.data("gocache",findl);
});
}else{
con.html(gocache).hide();
con.show("slow");
}
rac(".raceul li").removeClass("beforeli");
rac(".raceul li.cat7").addClass("beforeli");
});
rac(".raceul .cat8").click(function(){
var hocache = cachediv.data("hocache");
if(hocache==null){
con.hide();
con.load(‘/game-play/races/hobbes .gamerace’,function(f){
rac(this).hide(0);rac(this).show("slow");
var findl = rac(f).find(".gamerace");
cachediv.data("hocache",findl);
});
}else{
con.html(hocache).hide();
con.show("slow");
}
rac(".raceul li").removeClass("beforeli");
rac(".raceul li.cat8").addClass("beforeli");
});
rac(".raceul .cat9").click(function(){
var orcache = cachediv.data("orcache");
if(orcache==null){
con.hide();
con.load(‘/game-play/races/orcs .gamerace’,function(f){
rac(this).hide(0);rac(this).show("slow");
var findl = rac(f).find(".gamerace");
cachediv.data("orcache",findl);
});
}else{
con.html(orcache).hide();
con.show("slow");
}
rac(".raceul li").removeClass("beforeli");
rac(".raceul li.cat9").addClass("beforeli");
});
rac(".raceul .cat10").click(function(){
con.hide();
con.load(‘/game-play/races/halflings .gamerace’,function(){rac(this).hide(0);rac(this).slideDown("slow");
rac(".raceul li").removeClass("beforeli");
rac(".raceul li.cat10").addClass("beforeli");
});
});
});
[/code]