上面说的 伪异步加载 是咋一看的推测，感觉像是滚动到那里的时候 整一个ajax请求，将下面内容加载进来。
后来在不经意之间看了下源代码发现的。
看下面是商城的源码截图。

从图中可以看出，源码中有很多 textarea 的标签，里面的值就是即将要加载的html，然后就恍然大悟，原来所谓异步加载也可以这样来实现。

分析实现流程

首先是将要加载的html代码 丢进textarea 里，因为此时html 在 textarea 是一直val形式，不会被浏览器解析渲染，所以页面在刚加载的时候只显示第一屏。然后通过计算滚动条的相对偏移(数学问题)，将textarea的val 值添加到html 的dom里 ，因为浏览器是即时解析的，新添加的dom 会被重新渲染，这样新加的html 就显示出来了。这个就是所谓的lazy load ：伪异步加载。

为什么要用textarea ?

其实这个东西估计是 因为html 标签的限制，这个方法的设计之初，设计师想将 硕大的html数据 缓存在一个不会被解析标签里，然后就发现textarea 刚好符合期望。

为什么不用ajax ?

因为数据不需要验证，不是时变性的数据，再者使用ajax 会增加http请求，并且维护性不好。
目前淘宝的 TMS 后台系统 都是模版化引擎，使用ajax 会对 模版化 引擎 产生冲突 以及 维护成本高等。

如何实现？

从实现流程来讲，这个功能实现起来没什么难度，唯一有难度的是，怎样把这个功能做成一个通用的模块，简易添加 class 以及配置就可以实现等来提高重用特性。

有合弊端

优点那么多，缺点又怎样呢·？
SEO：存在textarea 里的数据 能不能被 搜索引擎抓取呢？ 这个我最近在自己blog里研究一下。
web标准： 这样的做符合web标准么？将html代码放在textarea来实现 飞鱼：只是一个标准而已。

好了 打完收工~~~

您可能还对这些日志感兴趣

• js跨域问题
• 判断输入的字符是否为中文
• 乱翻乱教- jQuery 制作N级导航菜单
• 乱翻乱教-使用JS输出HTML串最快的方法
• 菜鸟级: 标签切换效果 – JQuery实现

jQuery 制作仿DNF首页导航菜单效果

作者：飞鱼原创
飞鱼: 偶然发现这个东东很实用，就手把手写了个。
DNF首页的那只导航，似乎纯手写的。我这次要写的是用jquery来制作，制作代码非常极其简单，看了就知道怎么做(老鸟可以绕过哈，谁让咱们都是菜鸟 = =)

最终效果图

支持N级导航(添加子导航无需另外添加代码)。

html代码

首先当然是html啦，代码如下，没有什么技术含量，

<div class="menu" >
    <ul>
      <li>
        <a href="#">游戏介绍</a>
        <ul>
          <li><a href="#">升级体验</a></li>
          <li class="sub">
            <a href="#">游戏2</a>
            <ul>
              <li><a href="#">天赋系统</a></li>
              <li><a href="#">升级体验</a></li>
            </ul>
          </li>
          <li><a href="#">故事背景</a></li>
          <li><a href="#">职业介绍</a></li>
        </ul>
      </li>
      <li><a href="#">天赋系统</a></li>
    </ul>
  </div>

css代码

因为是仿dnf官方首页导航，所以样式也多少参考了一下它的样式，(图片我也给扣过来了 嘎嘎)

.menu{
  height:27px;
  float:left;
  background:#1d1d1d url(http://ossweb-img.qq.com/images/dnf/web200812/box_bg1.gif) repeat;
  border:2px solid #000;
}
.menu ul{
    border:1px solid #3f3f37;
    height:25px;
    float:left;
}
.menu li{
  float:left;
  position:relative;
  text-align:center;
  width:70px;
  background:url(http://ossweb-img.qq.com/images/dnf/web200812/img.gif) no-repeat -480px 9px;
}
.menu li .sub{
  background:url(http://ossweb-img.qq.com/images/dnf/web200812/img.gif) no-repeat -420px 9px;
}
.menu li a{
  color:#b29056;
  display:block;
  height:25px;
  line-height:25px;
}
  .menu li a:hover{
    color:#fff;
    text-decoration:none;
  }
  .menu li ul{
    position:absolute;
    top:25px;
    left:-1px;
    display:none;
    width:68px;
    height:auto;
    float:none;
    border-bottom:none;
    background:#1d1d1d url(http://ossweb-img.qq.com/images/dnf/web200812/box_bg1.gif) repeat;
  }
  .menu li ul a{
    display:block;
    height:25px;
    line-height:25px;
  }
    .menu li ul a:hover{
      background:#070707 url(http://ossweb-img.qq.com/images/dnf/web200812/r_linkbg.gif) repeat;
    }
  .menu li ul li{
    position:relative;
    width:68px;
    border-bottom:1px solid #3f3f37;
    background:none;
  }
  .menu li li ul{
    position:absolute;
    top:-1px;
    left:68px;
  }

js代码

这个代码，可以说是相当滴简单，只用了一只语法(.hover)。
说明一下代码的用处细节：(菜鸟专用，老鸟请跨过去 = =)

$(document).ready(function(){
  $('.menu li').hover(  //给menu 下的所有li 添加 hover 动作
    function () {   //鼠标在li 上时让 li 下的ul 显示出来
      $(this).children('ul:first').css('display', 'block');
    },
    function () {  //鼠标在离开li 上时让 li 下的ul 隐藏掉
      $(this).children('ul:first').css('display', 'none');
    }
  );
});

上面代码中我用:first 来只取第一个来提高效率(不知道我这样做对不对，感觉上应该是对的 – -)。

PS：代码演示，因为最近用的都不是自个儿的电脑，FTP上不去，就委曲下自己 尝试一下呢，效果还是不错的。

PS2：可以在这基础上增加其他功能：比如鼠标离开后，过半秒中导航才消失，这个需要用到setTimeout 函数来解决。有空我写个。^_^

您可能还对这些日志感兴趣

• 菜鸟级: 标签切换效果 – JQuery实现
• 滚动新闻 – jquery 扩展插件
• 一知半解 – 分析淘宝商城首页的 lazy load 功能
• 系统级应用项目中的函数命名冲突问题
• 走马观花 – jQuery调试工具- jQuery pad

最近开始狂啃JS，因为上个月去淘宝UED撞墙了，因为那边的“叔叔”们，一直都强调技术，特别是JS @_@ 。然后就被派遣回来了。

飞鱼：如果你跟我有同样遭遇的话，那么，一起学JS吧 嘎嘎···

得···切如正题。
=========== 华丽的分割线 =============

这文章是james.padolsey那看得，觉得挺有启发的，于是就翻译过来给大伙看看。

使用JS输出HTML串最快的方法

作者：James Padolsey
原文地址：猛击此链接(英文强悍的可以参考原文)
当需要将一大堆数组转换成固定格式的html，以下有几种实现方法。
注意：当然你可以直接手动将数组转换成html，如果那样的话，你就很有前途了^_^

方法一，拼接法

这种写法虽说不是最慢的，但是用的人却是最多的。额，貌似我以前都这么用

var arr = ['item 1', 'item 2', 'item 3', ...],
    list = '';

for (var i = 0, l = arr.length; i < l; i++) {
    list += '<li>' + arr[i] + '</li>';
}

list = '<ul>' + list + '</ul>';

就是使用for循环将每个数组使用字符串拼接起来的意思。

以后千万不要用这种啦，又丑又慢=。=

方法二，堆栈法(我起的名，=。=)

var arr = ['item 1', 'item 2', 'item 3', ...],
    list = [];

for (var i = 0, l = arr.length; i < l; i++) {
    list[list.length] = '<li>' + arr[i] + '</li>';
}

list = '<ul>' + list.join('') + '</ul>';

稍微比拼接法快些，但还不够完美。这次的代码使用了.join 方法 比上一种稍微高级了点，但是还是有万恶的for循环

方法三，圣杯(应该是说最佳办法吧)

var arr = ['item 1', 'item 2', 'item 3', ...];

var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';

看过后面的测试结果，你就会相信我说的，这是最快的方法。当然你也可以最近去测试一下。
作者很有自信，说这方法是最快速的。因为使用了join方法并且去掉了for循环，代码相当简洁，相比我以前老用的方法一，不禁大叫：oh 屎~~

浏览器测试

有图有真相

原文我就不翻译了，我的个人水平有限，从上图可以看出，大部分浏览器在处理以上代码时，第三种方法相对最快，但是chrome浏览器优点变态，估计是他独有的js 引擎在起作用吧。果然BT。

======补充======

原文下面评论提出了些问题：说如果数组里么有东西的话就只输出UL会有问题，说要使用三元式来解决。

您可能还对这些日志感兴趣

• 一知半解 – 分析淘宝商城首页的 lazy load 功能
• js跨域问题
• 判断输入的字符是否为中文
• 乱翻乱教- jQuery 制作N级导航菜单
• 菜鸟级: 标签切换效果 – JQuery实现

首先你得确保你是菜鸟级别的.然后不排除有大鸟也想看看.
那么都一起往下看吧. 嘿嘿.
最近在做东西的时候自己写的,相当之菜鸟, 稍微的牛叉的, 就是用了jquery.

写作的过程还是蛮享受的, 不知道jquery UI 里面有么有这个效果, 有空 咨询一下我哥, 把这个做成一个插件就牛逼了.^_^

有更好的实现方法可以tell  me 呢.

标签切换效果

• 1.第一步确保你的代码里有加载jquery裤~~~^_^
• 2.然后很傻逼的将下面的代码复制到你的html页面内.

  <div id="gro-popular" class="mod-gro-light">
    <div class="title hasTab"> <!-- hasTab 激活tab功能 -->
      <h2>Title</h2>
      <ul class="tabs"> <!-- tab_1 tab_2,以此类推,可以是其他名字, 确保统一,以便重用 -->
        <li class="tab_1 current"><a href="#">Tab1</a></li>
        <li class="tab_2"><a href="#">Tab1</a></li>
        <li class="tab_3 unable"><a href="#">Tab2</a></li>
      </ul>
    </div>
  <div class="content tab_1">content1</div>  <!-- tab_1 跟上面的要对应才可显示出来,不然会显示不出来^_^ -->
  <div class="content tab_2">content2</div>
  </div>

• 3.然后新建个js文件,或者直接在html上加这个js也可以(不推荐,很傻逼)粘下面的一段代码

  $(document).ready(function(){  // jquery语法 加载完毕后运行
  $('.hasTab li a').click(function(){  //('.hasTab li a') 给li下的 a 标签添加动作.
      var cur = $(this).parent('li');  // 获取 当前 li 对象 以便 添加 current 样式
      var tab = $(this).parent('li').siblings('li'); // 获取 所有同辈 li 用以 清除 current 样式
      var content = $(this).parents('.title:first').siblings('.content'); // 获取 包含内容的所有 content 对象
      if(!cur.hasClass('current') && !cur.hasClass('unable')){ // 是否 是 选中状态current 或者 无用状态 unable
  var attr = '.'+ cur.attr('class'); //获取 li 的class名 如: tab_1
        tab.removeClass('current'); //清除 current 样式
        cur.addClass('current'); //添加 current 样式
        content.hide(); //隐藏所有content
        content.siblings(attr).show(); //显示 目标 content
        return false; //返回 false 使a 属性无效
      }
      return true; //返回 true 使a 属性有效 保留退路.
    });
  });
  

• 4.然后… 对然后还有样式,不然傻逼一样就显示一个骨架怎么看. 我找找.

  /****** mod-gro-light ******/
  
  .mod-gro-light{
    background:#fff;
  }
  .mod-gro-light .title{
      height:30px;
  }
    .mod-gro-light h2{
      display:none;
    }
    .mod-gro-light .tabs{
      height:30px;
      margin-bottom:-1px;
      position:relative;
    }
    .mod-gro-light .tabs li{
      float:left;
      margin-top:5px;
      height:25px;
      background:#ededed;
    }
      .mod-gro-light .tabs li a{
        float:left;
        padding:3px 8px 0;
        line-height:21px;
        color:#5e5d5d;
      }
      .mod-gro-light .hasTab a{
        *hide-focus: expression(this.hideFocus=true);
        outline:none;
      }
  
      .mod-gro-light .tabs li.current{
        margin-top:0px;
        border:1px solid #d6d6d6;
        border-bottom:0px;
        background:#fff ;
        padding:3px 3px 0;
    	  height:27px;
      }
      .mod-gro-light .tabs li span,
      .mod-gro-light .tabs li.current a{
        float:left;
        border-top:2px solid #dbdbdb;
        margin:0;
        padding:3px 5px 0;
        font-size:14px;
        line-height:22px;
        font-weight:bold;
        color:#595959;
      }
      .mod-gro-light .tabs li span{
        font-weight:bold;
        padding:0px 4px 0;
      }
        .mod-gro-light .tabs li strong{
          margin:0 3px;
          color:#ff0050;
          font-size:18px;
        }
  
  .mod-gro-light .content{
    background:#fff;
    border:1px solid #d6d6d6;
    _height:160px;
    min-height:160px;
    padding:4px;
  }
  
  

您可能还对这些日志感兴趣

• 乱翻乱教- jQuery 制作N级导航菜单
• 滚动新闻 – jquery 扩展插件
• 一知半解 – 分析淘宝商城首页的 lazy load 功能
• 系统级应用项目中的函数命名冲突问题
• 走马观花 – jQuery调试工具- jQuery pad

相关地址: Chrome Experiments

如他们的网站名,请用chrome 打开浏览. 不然体会不到效果.

还有一个比较有意思的 就是google 页面 全掉下来的效果, 很震撼.

您可能还对这些日志感兴趣

• 一知半解 – 分析淘宝商城首页的 lazy load 功能
• js跨域问题
• 判断输入的字符是否为中文
• 乱翻乱教- jQuery 制作N级导航菜单
• 乱翻乱教-使用JS输出HTML串最快的方法

$.fn.extend({
  Scroll:function(opt,callback){
    //参数初始化
    if(!opt) var opt={};
    var _this=this.eq(0).find("ul:first");
    var line=opt.line?parseInt(opt.line,10):1, //每次滚动的行数，默认为一行
        speed=opt.speed?parseInt(opt.speed,10):500, //卷动速度，数值越大，速度越慢（毫秒）
        timer=opt.timer?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒）
    if(line<=0) line=1;
    var upHeight=0;
    //滚动函数
    getUp=function(){
      up=0;
      for(i=0;i<line;i++){
        up += _this.find('li:eq('+i+')').height();
      }
      up = 0-up;
      return up;
    }
    scrollUp=function(){
      upHeight = getUp();
      _this.animate({
        marginTop:upHeight
      },speed,function(){
        for(i=1;i<=line;i++){
          _this.find("li:first").appendTo(_this);
        }
        _this.css({marginTop:0});
      });
    }
    //鼠标事件绑定
    _this.hover(function(){
      clearInterval(timerID);
    },function(){
      timerID=setInterval("scrollUp()",timer);
    }).mouseout();
  }
})
})(jQuery);

然后 慷慨的老哥 给我编了个扩展, 相当牛逼, 我还么有仔细分析过这个代码, 但是用起来非常好用,比预期的好.
代码如下:

(function($) {
  $.fn.scroll = function(options) {
    options = options || {};
    this.css('overflow', 'hidden');
    var scroll = (function(self) {
      return function() {
        if (self.data('scroll_stop')) {
          return;
        }
        var li = self.find('li:first');
        var t = parseInt(li.css('marginTop')) || 0;
        li.animate({
          'marginTop': (t - li.outerHeight()) + 'px'
        }, options.speed || 'slow', function() {
          self.append(li);
          li.css('marginTop', t + 'px');
        });
      };
    })(this);
    setInterval(scroll, options.delay || 3000);
    this.hover(function() {
      $(this).data('scroll_stop', true);
    }, function() {
      $(this).removeData('scroll_stop');
    });
  };
})(jQuery);

使用方法是: 把上面的代码载入到页面然后用下面的代码调用.
$('id').scroll(); //常用 可调参数 有speed:速度; delay:滚动时间


目前是1.0版本, 实现效果还不错,主要是可以自动判断当前:first 的高度 自动调整. 解决了其他滚动js 时,因为 高度问题产生的抖动现象.

之后打算加些其他功能, 如 : 滚动多行

=====2009年5月11日更新======
飞鱼：演示地址

PS: 老哥 不是做程序员 真浪费丫“` 跑去开淘宝店

给大家介绍下 他的 淘宝店 吧“ 杭州包包专卖

您可能还对这些日志感兴趣

• 乱翻乱教- jQuery 制作N级导航菜单
• 菜鸟级: 标签切换效果 – JQuery实现
• 一知半解 – 分析淘宝商城首页的 lazy load 功能
• 系统级应用项目中的函数命名冲突问题
• 走马观花 – jQuery调试工具- jQuery pad

如果你真的认为自己是一只小菜鸟的话，请跟着我先看完此书，很有效果。
就像豆瓣上的评论一样。非常平易近人的解释了DOM(Document,Object,Model)理论, 把web的树形结构分析得有胸有腰.

里面的几个例子非常有实践性，可以自己去做做看。

我最喜欢作者所强调的预留退路这一理论，非常帅气，也非常之有道理，看完之后发现自己无论在js还有在css方面都有比较大的突破。

有兴趣去看看吧。

PS：此书最好借阅，记点笔记什么的，就可以了因为很薄，没有核心技术，就像丁大哥说的：不值得买

您可能还对这些日志感兴趣

• 一知半解 – 分析淘宝商城首页的 lazy load 功能
• js跨域问题
• 判断输入的字符是否为中文
• 乱翻乱教- jQuery 制作N级导航菜单
• 乱翻乱教-使用JS输出HTML串最快的方法

这个太强悍了,javascript 实现的 3D效果(链接在此), 推荐只用除了ie 以外的浏览器看, FF运行起来 稍微有点停顿, google chrome 这次可happy了,相当流畅. 锯齿效果还是非常明显,但是相信未来的web 3D游戏,就要来临了, 又是一个灰常吃cpu 的东东.

您可能还对这些日志感兴趣

• 一知半解 – 分析淘宝商城首页的 lazy load 功能
• js跨域问题
• 判断输入的字符是否为中文
• 乱翻乱教- jQuery 制作N级导航菜单
• 乱翻乱教-使用JS输出HTML串最快的方法

关于本学期退补选的紧急通知

作者：系统管理员
各位同学：
数字化部教务系统近期升级后，出现与ie浏览器7.0版本不兼容的问题，导致使用ie 7.0的同学无法
在网上进行退补选(网上选课下拉菜单不能显示)，数字化部正在协调处理。请不能进行退补选的同学换
用ie浏览器6.0版本的机器进行退补选操作，也可到教务处指定机房退补选（机房全部安装ie6.0)。
特此通知！
教务处
2009.2.23

是很强大，网上选课下拉菜单不能显示 应该是个js 问题，排查应该会很快，而且应当说ie7对js的支持更佳，唯一的解释是，css代码错误，或者是js 调用出错。

只怪，现在大学里都没开前端的课程，咱们学校(也是电子类)貌似还在教table，js之类的更是升华到了java级别。殊不知js跟java是远亲关系，虽然都是同个妈生的。

您可能还对这些日志感兴趣

• 一知半解 – 分析淘宝商城首页的 lazy load 功能
• 伸缩自如 – 绝对定位的自适应能力
• 发现 图片上的map的链接 不能是target=”_blank”
• DivCSS经验：三种实用CSS清除浮动的方法
• js跨域问题