JSSAY'S BLOG » WEB前端

Lazyload 延迟加载效果

yymoth — Fri, 05 Nov 2010 06:50:59 +0000

出处：http://www.cnblogs.com/cloudgamer/

Lazyload是通过延迟加载来实现按需加载，达到节省资源，加快浏览速度的目的。

网上也有不少类似的效果，这个Lazyload主要特点是：

支持使用window（窗口）或元素作为容器对象；

对静态（位置大小不变）元素做了大量的优化；

支持垂直、水平或同时两个方向的延迟。

由于内容比较多，下一篇再介绍图片延迟加载效果。

兼容：ie6/7/8, firefox 3.5.5, opera 10.10, safari 4.0.4, chrome 3.0

程序说明

【基本原理】

首先要有一个_container容器对象，容器里面是_elems加载对象集合的元素。

停止或不加载集合里面的元素（隐藏或替换等方法）。

然后历遍集合元素，当元素在加载范围内，再进行加载。

加载范围一般是容器的视框范围，即浏览者的视觉范围内。

当容器滚动或大小改变时，再重新历遍元素判断。

如此重复，直到所有元素都加载后就完成。

【容器对象】

程序一开始先用_initContainer程序初始化容器对象。

先判断使用的是window（窗口）还是一般元素作为容器对象：

var container = this._container,

isWindow = container == window || container == document

|| !container.tagName || (/^(?:body|html)$/i).test( container.tagName );

如果是window，再根据文档渲染模式选择对应的文档对象：

if ( isWindow ) {

var doc = document;

container = doc.compatMode == ‘CSS1Compat’ ? doc.documentElement : doc.body;

}

定义好执行方法后，再绑定scroll和resize事件：

this._binder = isWindow ? window : container;

$$E.addEvent( this._binder, “scroll”, this.delayLoad );

isWindow && $$E.addEvent( this._binder, “resize”, this.delayResize );

如果是window作为容器，需要绑定到window对象上，为了方便移除用了_binder属性来保存绑定对象。

【加载数据】

当容器滚动或大小改变时，就会通过事件绑定（例如scroll/resize）自动执行_load加载程序。

ps：如果不能绑定事件（如resize），应手动设置执行。

当容器大小改变（resize）时，还需要先执行_getContainerRect程序获取视框范围。

要获取视框范围，一般元素可以通过_getRect方位参数获取程序来获取。

但如果容器是window就麻烦一点，测试以下代码：

代码

html,body{border:5px solid #06F;}

alert(document.documentElement.offsetHeight)

在ie会得到想要的结果，但其他浏览器得到的是文档本身的高度。

所以在_getContainerRect程序中，其他浏览器要用innerWidth/innerHeight来获取：

代码

this._getContainerRect = isWindow && ( “innerHeight” in window )

? function(){ return {

“left”: 0, “right”: window.innerWidth,

“top”: 0, “bottom”:window.innerHeight

}}

: function(){ return oThis._getRect(container); };

ps：更多相关信息可以看“Finding the size of the browser window”。

在_load程序中，先根据位置参数、滚动值和阈值计算_range加载范围参数：

代码

var rect = this._rect, scroll = this._getScroll(),

left = scroll.left, top = scroll.top,

threshold = Math.max( 0, this.threshold | 0 );

this._range = {

top: rect.top + top – threshold,

bottom: rect.bottom + top + threshold,

left: rect.left + left – threshold,

right: rect.right + left + threshold

}

在_getScroll获取scroll值程序中，如果是document时会通过$$D来获取，详细看这里dom部分。

threshold阈值的作用是在视框范围的基础上增大加载范围，实现类似预加载的功能。

最后执行_loadData数据加载程序。

【加载模式】

程序初始化时会执行_initMode初始化模式设置程序。

根据mode的设置，选择加载模式：

代码

switch ( this.options.mode.toLowerCase() ) {

case “vertical” :

this._initStatic( “vertical”, “vertical” );

break;

case “horizontal” :

this._initStatic( “horizontal”, “horizontal” );

break;

case “cross” :

case “cross-vertical” :

this._initStatic( “cross”, “vertical” );

break;

case “cross-horizontal” :

this._initStatic( “cross”, “horizontal” );

break;

case “dynamic” ://动态加载

default :

this._loadData = this._loadDynamic;

}

包括以下几种模式：

vertical：垂直方向加载模式

horizontal：水平方向加载模式

cross/cross-vertical：垂直正交方向加载模式

cross-horizontal：水平正交方向加载模式

dynamic：动态加载模式

其中前4种属于静态加载模式，适用于加载对象集合元素的位置（相对容器）或大小不会改变（包括加载后）的情况。

其中后两种又属于”cross”模式，适用于两个方向都需要判断的情况。

程序会对静态加载的情况尽可能做优化，所以应该优先选择静态加载模式。

而动态加载就没有以上约束，但也没有特别的优化。

【动态加载】

动态加载是使用_loadDynamic程序作为加载程序的：

this._elems = $$A.filter( this._elems, function( elem ) {

return !this._insideRange( elem );

}, this );

程序会用_insideRange程序来判断元素是否在加载范围内，并用filter筛选出加载范围外的元素，重新设置加载集合。

在_insideRange程序中，先用元素位置和加载范围参数作比较，判断出元素是否在加载范围内：

代码

var range = this._range, rect = elem._rect || this._getRect(elem),

insideH = rect.right >= range.left && rect.left = range.top && rect.top <= range.bottom,

inside = {

"horizontal": insideH,

"vertical": insideV,

"cross": insideH && insideV

}[ mode || "cross" ];

在动态加载中，不会为元素记录位置参数，所以每次都会用_getRect程序获取加载元素的位置信息。

动态加载会默认使用"cross"模式来判断，即水平和垂直方向都判断。

如果元素在加载范围内，会执行_onLoadData自定义加载程序，进行元素的加载。

【静态加载】

静态加载是程序的重点，也是程序的主要特色。

主要是利用集合元素位置大小固定的性质进行优化，用这个方式会大大提高程序执行效率，越多加载项会越明显。

原理是对加载集合进行排序，转换成有序集合，这样加载范围内的元素总是加载集合中连续的一段。

即可以把加载集合分成3部分，在加载范围前面的，在加载范围内的和加载范围后面的。

以horizontal模式左右滚动为例，加载过程大致如下：

1，记录每个元素的位置参数，按left坐标的大小对加载集合进行排序（从小到大），设置强制加载，跳到1.1；

1.1，记录加载范围，如果是强制加载，跳到1.2，否则跳到2；

1.2，设置索引为0，跳到3；

2，判断滚动的方向，如果向右滚动跳到3，否则跳到4，没有滚动的话取消执行；

3，向后历遍元素，判断元素是否在加载范围内，是的话跳到3.1，否则跳到3.2，如果没有元素，跳到6；

3.1，加载当前元素，并把它从集合中移除，跳回3；

3.2，判断元素的left是否大于容器的right，是的话跳到5，否则跳回3；

4，向前历遍元素，判断元素是否在加载范围内，是的话跳到4.1，否则跳到4.2，如果没有元素，跳到6；

4.1，加载当前元素，并把它从集合中移除，跳回4；

4.2，判断元素的right是否大于容器的left，是的话跳到5，否则跳回4；

5，当前元素已经超过了加载范围，不用继续历遍，跳到6；

6，合并未加载的元素，并记录当前索引，等待滚动，如果全部元素都加载了，就完成退出。

7，当容器滚动时，跳到1.1；当容器大小改变时，设置强制加载，跳到1.1；当容器位置发生变化时，需要重新修正元素坐标，跳到1；

首先加载元素会在_rect属性中记录位置参数，不用重复获取，是一个优化。

更关键的地方是每次滚动只需对上一次索引到加载范围内的元素进行判断，大大减少了判断次数。

大致理解了原理后，后面再详细分析。

在_initMode模式设置中，对静态加载的情况会调用_initStatic初始化静态加载程序。

并传递两个参数mode（模式）和direction（方向）。

根据方向判断方式分三种模式："vertical"（垂直）、"horizontal"（水平）和"cross"（正交）。

这里先分析一下前两种模式。

在_initStatic程序中，先根据direction设置排序函数，再设置_setElems重置元素集合程序：

代码

var pos = isVertical ? "top" : "left",

sortFunction = function( x, y ) { return x._rect[ pos ] – y._rect[ pos ]; },

getRect = function( elem ) { elem._rect = this._getRect(elem); return elem; };

this._setElems = function() {

this._elems = $$A.map( this._elems, getRect, this ).sort( sortFunction );

};

其中_setElems有两个意义，一个是记录元素的坐标参数，还有是把加载集合用map转换成数组并排序。

因为自定义的加载集合有可以是NodeList，而用sort就必须先把它转换成数组。

最后设置_loadData加载函数：

代码

this._loadData = $$F.bind( this._loadStatic, this,

"_" + mode + "Direction",

$$F.bind( this._outofRange, this, mode, "_" + direction + "BeforeRange" ),

$$F.bind( this._outofRange, this, mode, "_" + direction + "AfterRange" ) );

其中_loadStatic静态加载程序是程序的核心部分，更关键的优化就在这里。

这里还给它包装了三个参数：

direction：方向获取的程序名；

beforeRange：判断是否超过加载范围前面的程序；

afterRange：判断是否超过加载范围后面的程序。

通过包装，除了方便参数的使用，还能使程序结构更加清晰。

direction可能是"_verticalDirection"（垂直滚动方向获取程序）或"_horizontalDirection"（水平滚动方向获取程序）。

在里面在调用_getDirection程序获取滚动方向：

代码

var now = this._getScroll()[ scroll ], _scroll = this._lastScroll;

if ( force ) { _scroll[ scroll ] = now; this._index = 0; return 1; }

var old = _scroll[ scroll ]; _scroll[ scroll ] = now;

return now – old;

原理是通过_getScroll获取当前的滚动值跟上一次的滚动值_lastScroll相差的结果来判断。

如果结果是0，说明没有滚动，如果大于0，说明是向后滚动，否则就是向前滚动。

然后记录当前滚动值作为下一次的参考值。

如果是强制执行（force为true），就重置_index属性为0，并返回1，模拟初始向后滚动的情况。

强制执行适合在不能根据方向做优化的情况下使用，例如第一次加载、resize、刷新等。

虽然不能做优化，但保证了加载的准确性。

在_loadStatic中，先用direction获取方向值：

direction = this[ direction ]( force );

if ( !direction ) return;

没有滚动的话就直接返回。

然后根据方向和上一次的索引来历遍加载集合，其中关键的一点是判断元素是否超过加载范围。

这个主要是通过beforeRange和afterRange程序来判断的。

从_loadData的设置可以看出，它们是包装了对应compare判断程序参数的_outofRange程序。

在"_vertical"方向，compare可能是：

_verticalBeforeRange：垂直平方向上判断元素是否超过加载范围的上边；

_verticalAfterRange：垂直方向上判断元素是否超过加载范围的下边。

在"horizontal"方向，compare可能是：

_horizontalBeforeRange：水平方向上判断元素是否超过加载范围的左边；

_horizontalAfterRange：水平方向上判断元素是否超过加载范围的右边。

在_outofRange中，通过compare来判断是否超过范围：

if ( !this._insideRange( elem, mode ) ) {

middle.push(elem);

return this[ compare ]( elem._rect );

}

先用_insideRange判断元素是否在加载范围内，不是的话把元素保存到middle，再用compare判断是否超过加载范围。

回到_loadStatic程序，根据方向判断，如果是向后滚动，先根据索引，取出加载范围前面的元素，保存到begin：

begin = elems.slice( 0, i );

这一部分肯定在加载范围外，不需要再历遍，再向后历遍集合：

for ( var len = elems.length ; i = 0; i– ) {

if ( beforeRange( middle, elems[i] ) ) {

begin = elems.slice( 0, i ); break;

}

}

middle.reverse();

当beforeRange判断超过加载范围前面，根据当前索引取出前面的元素，保存到begin。

由于middle在beforeRange里面是用push添加的，但实际上是倒序历遍，所以要reverse一下。

ps：虽然push/reverse可以直接用unshift代替，但元素越多前者的效率会越高。

最后修正一下索引，合并begin、middle和end成为新的加载集合：

this._index = Math.max( 0, i );

this._elems = begin.concat( middle, end );

这样就完成了一次加载，等待下一次了。

这部分有点抽象，不太好表达，有什么疑问的地方欢迎提出。

【cross模式】

cross模式即正交方向加载模式，是指垂直和水平都需要判断的模式。

也就是说，元素需要同时在两个方向的加载范围内才会加载。

按主次方向又分两种模式：”cross-vertical”（垂直正交）和”cross-horizontal”（水平正交）。

前者以垂直方向为主，水平方向为次，后者相反。

在_initStatic程序中，如果使用cross模式，会设置_crossDirection滚动方向获取程序：

this._crossDirection = $$F.bind( this._getCrossDirection, this,

isVertical ? “_verticalDirection” : “_horizontalDirection”,

isVertical ? “_horizontalDirection” : “_verticalDirection” );

可以看出，这是包装了primary和secondary参数的_getCrossDirection程序。

其中primary是主滚动方向获取程序，secondary是次滚动方向获取程序。

在_getCrossDirection中会根据主辅方向的滚动情况设置正交滚动值：

代码

direction = this[ primary ]();

secondary = this[ secondary ]();

if ( !direction && !secondary ) {

return 0;

} else if ( !direction ) {

if ( this._direction ) {

direction = -this._direction;

} else {

force = true;

}

} else if ( secondary && direction * this._direction >= 0 ) {

force = true;

}

包括以下几个情况：

1，主次方向都没有滚动的话，直接返回0；

2，主方向没有滚动而次方向有的话，就用上次滚动的反方向，如果没有上一次滚动就执行强制加载；

3，主次方向都有滚动，同时主滚动方向跟上次不是相反的话，就执行强制加载；

4，主次方向都有滚动，同时主滚动方向跟上次相反的话，按一般情况处理；

5，主方向有滚动而次方向没有的话，就是一般的情况，不用特别处理。

利用两个方向要同时判断的性质，在情况2只要从主方向加载范围内的元素找出在次方向也在加载范围内的就行了。

这个可以通过不断取反方向来实现。

情况3和情况4一般发生在刷新或设置了延迟时间比较长的情况。

如果主方向跟上次相同的话，可能会出现索引两边都有需要加载的元素的情况，不能确定方向，所以只能执行强制加载。

ps：如果在主方向的滚动量超过加载范围的话也能做优化，不过判断比较麻烦就不做了。

而如果方向相反的话，需要加载的元素只会出现在索引到加载范围的方向上，按一般情况历遍就行了。

cross模式跟其余两个静态加载模式的最主要区别就在于方向的判断上。

其他部分都差不多的，就不再详细说明了。

使用技巧

【选择模式】

如果加载元素位置固定大小不固定的情况下只能选择”dynamic”动态加载，否则应该优先选择静态加载。

在静态加载中，如果基本上是用于垂直或水平滚动，应该用”vertical”或”horizontal”模式。

两个方向都需要的话，如果主要是垂直滚动的话就用”cross-vertical”模式，否则用”cross-horizontal”模式。

【延迟html渲染】

Lazyload的一个作用就是延迟html渲染。

原理是先保存元素里面的html，当判断元素在加载范围里面时，再加载里面的html。

程序主要是做判断的部分，而如何保存和加载就看各位的想象力了。

以下几种方法个人认为还不错的：

1，ajax法：保存地址，加载时用ajax读取内容插入元素中；

使用恰当的话能有效节省服务器资源，特别是要读数据库的地方，但响应速度受网络影响。

2，textarea法：把html保存到一个textarea中，加载时把value插入元素中；

利用了textarea的特性，第二个实例就是用的这个方法，使用简单，响应速度快。

不过仅仅是html的话，貌似也没什么必要，可以考虑关联一些dom操作之类的。

2，注释法：把html保存到一个注释中，加载时把内容插入元素中；

跟textarea法类似，但效率应该更好，加载时找出nodeType为8的节点，再把nodeValue插入元素中；

但在ie如果用innerHTML添加注释会被自动忽略掉，使用时注意。

以上方法都有一个问题，在不支持js的时候不能平稳退化，谁有更好的方法的话欢迎赐教。

以上方法都有一个问题，在不支持js的时候不能平稳退化，谁有更好的方法的话欢迎赐教。

除此之外，还可以用来延迟js执行，css渲染等，下一篇还会有图片的延迟加载。

【position的bug】

在写第一个实例的窗口模式时，遇到了两个bug：

在ie6/7，overflow为scroll或hidden的元素，其中position为absolute或relative的子孙元素会出现异常。

解决方法：

1.为包含块元素添加属性position:relative。

2.把该元素的position:relative属性去掉，使用默认的static定位，并通过margin-top等属性实现类似的效果。

参考自“IE6 CSS bug”。

还有一个问题是，在ie6，overflow为visible的元素，会被其内容撑开。

解决方法：

在ie6下，本来overflow为visible的元素设为hidden，并把内容position设为relative。

原理请看“IE6 overflow:visible bug”。

还要注意的是，加载元素只能是容器的子元素。

使用说明

实例化时，有必要参数元素集合，可以是元素数组或NodeList集合。

可选参数用来设置系统的默认属性，包括：

属性: 默认值//说明

container: window,//容器

mode: “dynamic”,//模式

threshold: 0,//加载范围阈值

delay: 100,//延时时间

beforeLoad: function(){},//加载前执行

onLoadData: function(){}//显示加载数据

还提供了以下方法：

load：加载程序；

resize：容器大小改变加载程序，其参数说明是否重置元素集合；

delayLoad：延迟的load程序；

delayResize：延迟的resize程序；

isFinish：指明程序是否执行完成；

dispose：销毁程序，其参数说明是否加载所有元素。

本Blog文章除特别声明之外皆为原创文章，欢迎转载，转载请注明： 转载自JSSAY'S BLOG

本文链接地址: http://www.jssay.com/blog/index.php/2010/11/05/lazyload-lazy-loading-effect/

2010年05月28日 -- 浅谈tudou.com首页图片延迟加载的效果

极力推荐20款最新的jQuery插件

jssay — Thu, 28 Oct 2010 06:39:59 +0000

本人喜欢Jquery,更喜欢用Jquery开发Web项目.几乎我经历的每个Web项目都会用到Jquery技术,尤其是JQuery的插件.那些漂亮,丰富,功能强大的插件是我做项目的首选.今天看到JE上有人收集了最新的20款Jquery插件,我真是欣喜若狂,赶紧将它收藏起来,然后自己在仔细研究,看能不能运用到项目上来.其实我一直想要写几个插件,无奈我能想到的插件都有了很好的实现了,废话不多说了,看下面20款最新的Jquery插件:

1. Custom Animation Banner with jQuery

通过使用 jQuery Easing和jQuery 2D Transform插件，创建自定义animation banner。

View Demo（查看示例）

2. 快速反馈表 – jQuery & PHP
Martin Angelov 将教你如何快速的创建用于接收来自用户反馈的解决方案，使用到了jQuery, PHP 和 PHPMailer类。

View Demo（查看示例）

3. Wijmo – jQuery UI 组件
Wijmo是一个jQuery UI组件集，有超过30多个jQuery UI 组件；这将是一个CSS3，SVG，HTML5的混合物，目前还处于Beta阶段。
View Demo（查看示例）

4. 页面导航 – jQuery插件
这是一个页面上的导航插件，基于jQuery ScrollTo 插件，你可以在 Github上查看更多介绍。
View Demo（查看示例）

5. RSS Reader With jQuery Mobile
Jeffrey Way 创建了一个简单的RSS reader，主要用于iphone和Andriod手机，通过PHP和jQuery mobile 实现。
View Demo（查看示例）

6. Easy Accordion – jQuery插件
The Easy Accordion插件可以生成一个类似手风琴样子的自定义列表。
View Demo（查看示例）

7. Lettering – jQuery Typography Plugin
Lettering是一个轻量级易于使用的网页排版插件，例如印刷CSS3的海报，自定义类型的标题等。
View Demo（查看示例）

8. Annotation Overlay Effect with jQuery
创建一个简单的叠加效应
View Demo（查看示例）

9. Snippet – jQuery Syntax Highlighter
Snippet是一个很酷的jQuery语法高亮插件，基于SHJS脚本，你可以在SourceForge上找到源码。
View Demo（查看示例）

10. Google Powered Site Search With jQuery

教你如何创建一个自定义的搜索引擎，只需要使用Google AJAX Search API，你可以搜索到您网站上的图片，视频和新闻等……

View Demo（查看示例）

11. 简单的工具提示 – jQuery & CSS
Soh Tanaka 创建一个简单的jQuery和CSS样式提示
View Demo（查看示例）

12. Compact News Previewer with jQuery
创建一个文章/新闻预览，以经凑的方式显示您最想的文章或新闻。预览工具将会显示一些关于文章更长的描述。
View Demo（查看示例）

13. Exposure jQuery插件
Exposure是一个图片预览插件，用于创建丰富，自定义的视觉体验。
View Demo（查看示例）

14. Giveaway Randomizer App – jQuery
它会教你如何去创建一个jQuery专用的随机数发生器。
View Demo（查看示例）

15. jQuery Smooth Tabs Plugin
jQuery Smooth Tabs是一个简单易于使用的插件，可以让你选择一些漂亮的效果来显示你的文字内容，带来更好的用户体验。
View Demo（查看示例）

16. TN34 Timetabs – jQuery Plugin
Mario Alves创建的一个tab容器的jQuery插件，可以选定不一样的样式来显示下一个tab。下载插件：HERE.
View Demo（查看示例）

17. Full Page Image Gallery with jQuery
创建一个效果惊人的滚动缩略图和滚动全屏预览的画廊。
View Demo（查看示例）

18. bgStretcher – jQuery Plugin
Background Stretcher可以让你在背景中添加一个或多个大尺寸的图片，并调整他们的大小来填满整个页面，多张图片时会以幻灯片的形式出现。
View Demo（查看示例）

19. SlideNote – jQuery插件（滑动通知）

SlideNote 是一个自定义，扩展性很强的jQuery插件，可以轻松的在网页或你的web应用上创建滑动通知。

View Demo（查看示例）

20. Easy List Splitter – jQuery插件

Easy List Splitter插件将获取到的list和wrap装入一个container div，生成相应的列表项，并且生成一个有效的HTML代码。

View Demo（查看示例）

本Blog文章除特别声明之外皆为原创文章，欢迎转载，转载请注明： 转载自JSSAY'S BLOG

本文链接地址: http://www.jssay.com/blog/index.php/2010/10/28/20-models-of-the-latest-highly-recommend-jquery-plugin/

2010年10月18日 -- Jquery最新版（V1.4.3）发布
2010年05月10日 -- 多个Jquery插件的冲突问题
2009年12月13日 -- 2009 年度最佳 jQuery 插件（转）
2009年12月1日 -- JQuery学习资料
2009年11月29日 -- 用Jquery制作的几款3D效果
2009年11月10日 -- JQuery,ExtJS,YUI,Prototype,Dojo等JS框架的区别和应用
2009年11月6日 -- 1000个JQuery极品插件(连载中…)
2009年10月18日 -- QQ客服列表的制作

Jquery最新版（V1.4.3）发布

jssay — Mon, 18 Oct 2010 13:33:41 +0000

2010年10月16日，Jquery释出了1.4系列的第三个版本。此版本解决了一些Bug，也带来了一些好的改善。

首先，你可以通过以下两个连接获得Jquery的最新版本：
http://code.jquery.com/jquery-1.4.3.min.js
http://code.jquery.com/jquery-1.4.3.js

其次，这次新版本问世，有一些功能上的改善，比如：

1． JSLint Tool
JSLint Tool是一个Javascript代码质量管理工具，它采用严格模式规范化Javascript程序。目前，Jquery已经将它集成到Jquery的工作流之中。

2．模块化
移除了很多存在于Jquery模块之间的互相依赖关系。

再者，此次发布还带来了很多新的特性。比如：
1． CSS模块重写
几乎所有的CSS模块都基于可扩展性而被重写了，现在你可以写一些自定义的CSS插件来扩展.css()和.animate()提供的方法。
2． Html5 数据属性
举个例子，给定下列HTML代码：

下面这段jquery代码将会工作：
$("div").data("role") === "page"; $("div").data("hidden") === true; $("div").data("options").name === "John";

3．遍历
几乎大部分的遍历方法都有很明显的性能提升，比如：.closet()， .filter()等。

还有就是对Ajax/Event和Effect方面的改进。

本Blog文章除特别声明之外皆为原创文章，欢迎转载，转载请注明： 转载自JSSAY'S BLOG

本文链接地址: http://www.jssay.com/blog/index.php/2010/10/18/jquery-latest-version-v1-4-3-released/

2010年10月28日 -- 极力推荐20款最新的jQuery插件
2009年12月13日 -- 2009 年度最佳 jQuery 插件（转）
2009年12月1日 -- JQuery学习资料
2009年11月29日 -- 用Jquery制作的几款3D效果
2009年11月10日 -- JQuery,ExtJS,YUI,Prototype,Dojo等JS框架的区别和应用
2009年11月6日 -- 1000个JQuery极品插件(连载中…)
2009年10月18日 -- QQ客服列表的制作

html5小游戏收集中…

jssay — Mon, 11 Oct 2010 15:26:50 +0000

最近在网上看到很多关于html5的文章，做出的效果非常震撼，虽然说html5替代flash尚需时间的检验，但是html5确实是令人耳目一新，必将掀起一股新的热潮，虽然我不是那种赶时髦的人，但是对于一种新技术的诞生，我还是免不了要关注一下的。

今天看到一款用html5制作的坦克游戏，虽然界面风格和游戏性方面还比较粗糙，但是从开发的角度来看，绝对是值得学习和参考的。
在线游戏地址：http://transping.com/ptank/

下面是一些我收集来的html5小游戏，也非常值得一试。需要声明的是，这些游戏虽然很小也很幼稚，但是如果你站在开发者的角度来看，你就不会那么觉得了，让我们先来体验一下吧。

Sinuous
小心被红点撞上。
<
超级玛丽卡丁车
A small but fun racing game built in html5 canvas and javascript.

吃豆

 圆环俄罗斯方块

 Asteroids

Bert’s Breakdown
很不错的游戏，漂亮的界面以及不错的关卡设置。

TWITCH
TWITCH是一个解题性质的游戏。试试看你有多快。

JS Wars
一个经典的空战游戏

Chain Reaction
一个简单又容易上瘾的游戏。

Same Game
这个游戏相信大家都会玩，把相同颜色的连在一起。

Coverfire

JQuery Racing
靠！这个游戏很耐完，我相信你一定会在上面花很多时间。 jQuery 做的。

Thrust
经典的八位图游戏。

俄罗斯方块

 3D 俄罗斯方块 – Cubeout

这个游戏使用了Canvas 和 Audio，主要是为了证明，没有Flash，用HTML5一样行。

Lines
很简单的游戏，我老看到办公室里很多人在玩。

RGB Invaders
小蜜蜂

Agent 008 Ball

受不了了，还有台球。

JSLander

一个飞船着陆游戏。速度不要起过去6，不然就坠毁了。

Rainbow Blocks

SameGame 和JT的另一种变种。

是不是很棒呢，其实这还只是九牛一毛，还有很多更新更好玩的游戏还有待发掘。如果你有更酷更炫的html5小游戏要推荐，请本着开源共享的精神告诉我们，先谢谢了！

中文来源：http://coolshell.cn/articles/2998.html
英文国际来源：http://blog.insicdesigns.com/2010/09/showcase-of-games-developed-using-html5-canvas/

本Blog文章除特别声明之外皆为原创文章，欢迎转载，转载请注明：转载自JSSAY'S BLOG

本文链接地址: http://www.jssay.com/blog/index.php/2010/10/11/html5-game-collection/

随机日志

2009年12月11日 -- 卡巴斯基(kav)7.0最新KEY授权文件(2009.12.10)
2009年11月9日 -- jar命令详解(转载)
2009年12月8日 -- PDF中文本高亮显示
2010年05月12日 -- jquery file Tree
2010年09月20日 -- 网站流量统计工具推荐
2009年10月17日 -- 英文写作绝招
2010年03月1日 -- 浅谈丰田召回门
2009年10月21日 -- 用Lucene检索多个索引目录
2010年02月24日 -- 迁移证过期如何落户
2010年05月17日 -- 长条文字Flash+xml自动变换广告代码

Ext-JS Grid中诡异的时间问题

jssay — Fri, 08 Oct 2010 11:00:38 +0000

问题描述:
项目中需要用到Ext-JS带过滤功能的Grid插件,即Grid filter.程序要输出两列数据,时间(date)和值(value),数据量不大,大概有1000多条,数据是通过一个jsp将一个文本文件(.txt)解析成json格式的文件.一切准备好后刷新该页面,问题出现了,在日期这一列偶尔会有奇怪的时间出现,比如1970,1921,这是在数据文件中不可能存在的日期.而且每次刷新后,数据还不一样,有时候数据是完全正确的,有时侯多了N条诡异的数据.

问题分析:
发现这个问题后,我首先怀疑解析数据的那个jsp,因为他是整个程序的数据源.但是在一番调试后发现,根本不是这个jsp的问题,因为这个jsp在给定的参数条件下,生成的数据是永远不变的.

jsp的嫌疑解除了,我开始怀疑这个插件本身的原因.是不是首次加载的数据过多,导致这个插件出问题了.但是这个推测也被推翻了, 因为我试着将数据减少到20条以内还是不行,那就不是数据量的问题了.

然后我仔细对比了一下表格显示的数据和jsp产生的数据,发现那些诡异的时间对应的值在jsp数据文件中是存在的,而通过这个值在jsp产生的数据里是可以找到相应的日期的,然后在表格中查找这个日期,发现这个日期没有了,被那个诡异的日期替代了.虽然发现了这个问题,但是形式依然很不明朗.继续头疼中.

最后我打算在Grid的配置文件中找一找看有没有收获.配置文件是为了让Grid如何显示的,在review一行行代码的时候,我发现一个问题就是,我的日期这一列配置的时候,id设置的是”date”,而它的类型(type)也设置成”date”了,会不会这里有问题呢?

解决方案:
虽然说我不能肯定这个”date”值设置的是否有问题.但是根据我的经验,这里值得研究一下.于是我把与”date”相关的值都改掉了,最后试了一下.发现诡异的时间消失了,我又接着测了10几次,都没有出现之前的现象,貌似这个问题就被我碰巧解决了.

最后我想说的是,改bug也要不抛弃不放弃,抓住一个机会就要去尝试一下,看似很难的一个问题往往在不经意间解决了.希望我的经验对你有用.

本Blog文章除特别声明之外皆为原创文章，欢迎转载，转载请注明： 转载自JSSAY'S BLOG

本文链接地址: http://www.jssay.com/blog/index.php/2010/10/08/ext-js-grid-in-the-tricky-matter-of-time/

2010年07月9日 -- Number Format for Grid Panel
2009年11月10日 -- JQuery,ExtJS,YUI,Prototype,Dojo等JS框架的区别和应用

UML建模工具介绍

jssay — Thu, 30 Sep 2010 02:25:32 +0000

有很多工具可以帮助用户画出UML图,其中有些是纯粹的绘图工具,而有的则是具体代码生成功能的OO设计工具,一个好的OO设计工具可以是双向的,既可以从代码生成UML图,也可以从UML图生成代码,这样一来的工具包括:

1. Rational Rose:www.rational.com
2. Together:www.togethersoft.com
3. Microsoft Visio:www.microsoft.com
4. Visual UML:www.visualobjectmodelers.com
5. Model Bridge:www.metaintegration.net
6. MicroGold WithClass:www.microgold.com
7. QuickUML:www.excelsoftware.com

以上列出的这些工具,Together比较特殊,它将JavaIDE 和 OO设计工具合二为一,用户既可以看到Java代码也可以看到UML图，有点类似于Dreamweaver，可以边修改代码边浏览UML图, 非常人性化.

当然这里面的绝大部分都是要注册的,如果你不想这么麻烦,可以去找一个开源的UML 工具,也同样能够满足你.

如果你有更好的UML建模工具,请推荐给我们,谢谢!

本Blog文章除特别声明之外皆为原创文章，欢迎转载，转载请注明： 转载自JSSAY'S BLOG

本文链接地址: http://www.jssay.com/blog/index.php/2010/09/30/uml-modeling-tools-introduced/

随机日志

2010年10月13日 -- VirtualBox最新版下载(V3.2.10)
2010年09月25日 -- 55个华丽的绿色主题网站推荐
2010年10月26日 -- 小心你的网站被和谐了
2010年10月10日 -- 14款优秀的MySQL客户端
2009年10月29日 -- Wordmaster 单词大师
2009年10月28日 -- Lucene中的特殊字符
2009年10月28日 -- miniktv(迷你ktv)即将上市,轻轻松松带回家
2011年03月23日 -- Firefox4正式版发布
2010年09月28日 -- 该死的IIS
2009年10月30日 -- 玩个保护老婆的游戏！

11个有用的Tab导航解决方案

jssay — Wed, 29 Sep 2010 15:41:47 +0000

有时候使用tab是非常明智的，当你的屏幕宽度不能完全显示网页内容的时候，tab能够节省很多空间，使用户能在一个相对比较小的空间内触发页面元素。为了使你的tab功能更进一步，你可以将jQuery整合进来，来实现良好的过度和动画效果。如果你还没有用jQuery构建过任何tab导航，这里为你提供了11个新手指南和插件来帮助你从头开始。

Create A Tabbed Interface Using jQuery

一个用于创建动画效果的tab区域的指南和插件

用jQUery1.4和CSS3实现的非常可爱的Ajax Tab

在这个指南中，你会学到如何利用CSS3和jQuery创建一个Ajax驱动的tab页面

Building a Better Blogroll: Dynamic Fun with SimplePie and jQuery

这份指南教你如何使用一些有趣的jQuery动画建立一个tab效果的博客列表

使用CSS和jQuery创建一个巧妙的tab效果的内容区域

这份指南教你如何使用HTML建立一个简单的tab消息盒,然后使用一些简单的javascript来完善它的功能，最后我们将使用jQuery库来归档相同的东西。

特征列表

这个jQuery插件能够非常容易地创建一个交互式的特征项目窗口

基于jquery的酷炫滑动表单

这份指南教你如何创建一个华丽的滑动表单，在每一步过后向用户显示一些验证信息，这个表单节省了许多空间，并且很容易访问，它基本上就是一个Slider,只是我们用一个个表单字段取代了图片而已。

Create A Tabbed Interface Using jQuery

这份指南教你如何使用jQuery UI库里面的Tabs功能来创建一个tab界面。

Tabify

这个jQuery插件让你更加容易地创建tab内容，你所需要的只是一个带有li元素的ul元素和一对相应的内容div标签，Tabify和它的竞争者的主要差别在于他们的大小。

Accessible-Tabs

jquery插件来的

idTabs

idTabs一款jQuery的插件，它使得增加tab到网页中变得超级简单，同时它也打开了一道通向无限可能的大门。

基于jQuery的可移动的tab和可滑动的内容指南

学习如何使用简单的jQuery代码建立熔岩灯效果的tab和滑动的内容，这个脚本对展示最近的文章、评论和社区新闻非常适合。

本Blog文章除特别声明之外皆为原创文章，欢迎转载，转载请注明： 转载自JSSAY'S BLOG

本文链接地址: http://www.jssay.com/blog/index.php/2010/09/29/11-tab-navigation-solutions-useful/

2010年09月28日 -- 46个功能强大的Javascript滑动器和滚动条
2010年09月22日 -- 24个高级JQuery特效
2009年12月13日 -- 2009 年度最佳 jQuery 插件（转）
2009年11月29日 -- 用Jquery制作的几款3D效果
2009年11月6日 -- 1000个JQuery极品插件(连载中…)

46个功能强大的Javascript滑动器和滚动条

jssay — Tue, 28 Sep 2010 13:56:01 +0000

每个Web开发人员都需要使用javascript来构建web应用，当需要用一个简单的滑动器或者滚动条实现在页面上展示多个条目的时候，你可以使用带有新闻、图片、产品的javascript滑动器和滚动条,用一种有组织良好的、对用户友好的方式去显示数据。在这篇文章里，我为你准备了46款功能非常强大的javascript滑动器和滚动条，来帮助你更好地开发web应用。