1. 企划场景

     
某些周末的清早躲在家里睡大觉,突然我们分外(亿网集团的技巧COO)2个对讲机拨过来,他说:智华,你尽快从床上跳起来,不要刷牙,不要洗脸,滚到电脑方今,打开电脑,大家的印刷网(http://www.51ysw.com/index.html)出标题了…

     
等自个儿收拾停当,打开计算机,果然发现印刷网的难点:首页那边有2个产品浏览的版块在延迟载入的时候,将自家拥有的隐藏帧的项都显示出来(如图,作者本意是突显两行图片,但是在载入卡住,将上边一些隐藏成分都显示出来了),全体画面粗糙凌乱,整个网页完全载入并八面后珑运作的时刻推移超越5秒,在这种交互性极强的在线印刷网站是老大沉重的,这给用户一种极其倒霉的Web体验,并归咎为网站的不稳定…

     图片 1

这儿不能责怪公司的服务器烂,网速卡之类的,那样很也许会造成老大对自家一顿胖揍甚至扣奖金…

由此不得不从网站质量方面拓展修正…

 

2.企划目的

   
减少页面载入时不须求的元素,营造1个轻量级的Web页面…

 

3.解决方案

    当初自作者接过这一个Case的时候,最初的设计方案毫无疑问是隐藏帧做法,那是最棒用也是最不难简单的,它的章程就是将七个标签tab(画册,手提袋,挂历,包装)所对应的多个Div全部载入页面,并在载入时体现第三个tab(画册)的Div,在鼠标轮滑过tab的时候显得相应tab标签的Div,隐藏其余tab标签的Div…

  
因而才会现出上述的情景,笔者纪念自家前一天夜晚看的一本Web设计形式的书,下边包车型大巴一段话引曾起自笔者的注意:使用页面成分更新来重构Dom树往往比隐藏帧的性质要高得多…所以此时本人的想法正是重构Dom树… 

 

    
Web页面包车型地铁源码很简单,主要的在于  id=”tabcontent”
的百般Div,它是重庆大学,它其否月素的变换取决于上边的七个<li>标签,当鼠标经过时就将分歧的内容更新到Div里面,那使得页面不用一初阶就将兼具的成分都载入,并进行耐心的隐没和突显,落成代码如下。。。

如此,就有三个id分别tabcontent1,tabcontent2,tabcontent3,tabcontent4为Div不断的轮换 替换进id=”tabcontent”的
Div里面 ,尝试一下,确实品质高了很多…

 

 

图片 2图片 3代码

<div class="menu">                   
<ul>
<li><a href="#" id="tablink1" onclick="return false">包装盒 </a></li>
<li><a href="#" id="tablink2" onclick="return false">画册 </a></li>
<li><a href="#" id="tablink3" onclick="return false">手提袋 </a></li>
<li><a href="#" id="tablink4" onclick="return false">三折页 </a></li>
</ul>
</div>                 

 <div class="border2 w1" id="tabcontent"> 

</div>

 

 

/隐藏标签
 function tabs(i)
{  
  var num,ids,ordnum;

   switch(i)
   {
     case 1:{ append(1,1,"f"); break;} 
     case 2:{ append(2,5,"s");  break;}
     case 3:{ append(3,9,"t");  break;}
     case 4:{ append(4,13,"fo"); break;}
   }
}


//更新数据
function append(i,j,type)
{
  var str="<div class='show_img h3' id='tabcontent"+i+"'>";
  str+="<div id='"+type+"demo' class='demo'>";
  str+="<div id='"+type+"indemo' class='indemo'>";
  str+="<div id='"+type+"demo1' class='demo1'>";
  str+="<a href='#'><img src='img/"+j+".png' border='0' /></a>";
  str+="<a href='#'><img src='img/"+ (++j) +".png' border='0' /></a>";
  str+="<a href='#'><img src='img/"+ (++j) +".png' border='0' /></a>";
  str+="<a href='#'><img src='img/"+ (++j) +".png' border='0' /></a>";
  str+="</div>";
  str+="<div id='"+type+"demo2' class='demo2'></div>";
  str+="</div></div><div>";
  $("#tabcontent").html(str); 
}

 

 

到此处应该算驾鹤归西,然则作者恍然想起叁个题材,那种做法实在和jQuery中的hover思想是同样的,而那边是进展轮询的Dom成分更新,也正是说每三次鼠标移动标签都要有一部分数额要发送和选取,相对与位置小段数据是没什么影响,但是大的Case中央银行使那种格局就不可行,因为它的Dom成分更新只怕是十几kb甚至几十kb的数据流,那无疑给Web页面包车型大巴习性带来巨大的挑战…

 

为此,我又做了1个细小改变,那正是应用Dom重构+隐藏帧用法,在页面第二次载入的时候,先载入的是首先个标签所对应的Div,即画册所对应的Div,当鼠标移到其余tab标签时候,追加该标签所对应的因素(该因素若存在则去掉藏匿并体现,不存在则扩展),并隐蔽其余Tab标签所对应的Div标签…该方法有个名称,叫做“多阶段下载…”,那样就不要每一次都进展成分更新,代码如下…

 

 

 

//隐藏标签
 function tabs(i)
{
   for(var j=1;j<5;j++)
   {
     $("#tabcontent"+j).hide();  
   }
    $("#tabcontent"+i).show();

  var num,ids,ordnum;

  var len= $("#tabcontent"+i).length;//这句话很重要,它是杜绝将元素重复载入的判断(如果该元素存在,就不需再次追加)

  if(len==0)
  {
   switch(i)
   {
     case 1:{ append(1,1,"f"); break;}
     case 2:{ append(2,5,"s");  break;}
     case 3:{ append(3,9,"t");  break;}
     case 4:{ append(4,13,"fo"); break;}
   }
   }
}


//载入数据
function append(i,j,type)
{
  var str="<div class='show_img h3' id='tabcontent"+i+"'>";
  str+="<div id='"+type+"demo' class='demo'>";
  str+="<div id='"+type+"indemo' class='indemo'>";
  str+="<div id='"+type+"demo1' class='demo1'>";
  str+="<a href='#'><img src='img/"+j+".png' border='0' /></a>";
  str+="<a href='#'><img src='img/"+ (++j) +".png' border='0' /></a>";
  str+="<a href='#'><img src='img/"+ (++j) +".png' border='0' /></a>";
  str+="<a href='#'><img src='img/"+ (++j) +".png' border='0' /></a>";
  str+="</div>";
  str+="<div id='"+type+"demo2' class='demo2'></div>";
  str+="</div></div><div>";
  $("#tabcontent").append(str); 
}

 

 

4.设计小结

  
网站的习性进步了,既不会并发在第二次载入的时候页面成分负荷过重而致使的延期,也不会因为Dom树的不断更新而造成页面展现品质低下…

 

如图:

图片 4

 源码下载:(http://files.cnblogs.com/wzh2010/DomForm.rar)

 

相关文章

网站地图xml地图