摘要: 前言 懒加载技术(简称lazyload)并不是新技术,它是js程序员对网页性能优化的一种方案。lazyload的核心是按需加载。在大型网站中都有lazyload的身影,例如谷歌的图片搜索页,迅雷首页,淘宝网,QQ空间等。因此掌握lazyload技术是个不错的选择,可惜jquery插件lazy load官网(http://www.appelsiini.net/projects/lazyload)称不支持新版浏览器。lazyload在什么场合中应用比较合适? 涉及到图片,falsh资源,iframe,网页编辑器(类似FCK)等占用较大带宽,且这些模块暂且不在浏览器可视区内,因此可以使用lazylo 阅读全文
posted @ 2011-01-24 16:41 nicolaszhao 阅读(1246) 评论(1) 推荐(2) 编辑
摘要: 避免不必要的复杂性支持已有的内容解决现实的问题求真务实平稳退化最终用户优先 阅读全文
posted @ 2011-01-21 12:44 nicolaszhao 阅读(179) 评论(0) 推荐(0) 编辑
摘要: 下面的jQuery plugin列表是我在项目中使用率较高,而且也比较稳定的,他们的扩展性都比较好,文档比较齐全。Photos, Images, GalleriesjCarousel LiteCycleLightboxRoundaboutZoomFormAjax UploadCookieForm ValidationMasked InputPassword StrengthDialog, ConfirmBlock UIOther Tool Tip Easing 阅读全文
posted @ 2011-01-14 13:24 nicolaszhao 阅读(515) 评论(1) 推荐(0) 编辑
摘要: CSS中使用font-family属性引用中文字体时,经常采用三种方式定义字体: 直接写中文 英文别名 Unicode码直接使用中文名称时,在不支持中文的系统或编码的页面就有可能会无法正常显示。如果使用Unicode码的话又不方便记忆。下面整理了常用的中文字体的英文别名,便于大家查找和使用:Windows 中文名 英文名 宋体* SimSun 黑体* SimHei 微软雅黑* Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU 细明体 MingLiU 标楷体 DFKai-SB 仿宋 FangSong 楷体 Kai 阅读全文
posted @ 2010-12-17 13:39 nicolaszhao 阅读(1682) 评论(0) 推荐(3) 编辑
摘要: line-height是可以继承的,所以子元素可以不用重复定义line-height。我们一般也会在后面带上单位(如:line-height:22px; 或是line-height:1.4em;),但line-height给人带来麻烦的地方也是这个继承和后面加的单位。有的时候,我们为了实现单行文字的垂直居中,会给line-height一个和height相同的固定的值;有的时候,我们为了调整特定的某段文字的行间距,通常会考虑使用百分比或者相对尺寸的em。或许是习惯,于是我们都习惯了line-height是要有单位的。这些情况下,我们都不需要考虑line-height的继承,也不会发现任何问题。当 阅读全文
posted @ 2010-12-08 13:23 nicolaszhao 阅读(536) 评论(2) 推荐(1) 编辑
摘要: AJAX是web2.0的基石,现在网上流行几种开源的Ajax框架,比如:jQuery,Mootools,Dojo,Ext JS等等,那么我们到底在什么情况下该使用哪个框架?以下是一组摘抄的数据:Ajaxian在2007年底对Ajax工具进行了调查,部分调查结果见下表(其中数字为调查者使用该工具的百分比,详细的请参见网页):http://ajaxian.com/archives/2007- ajax-tools-usage-survey-results Prototype jQuery Ext Script.aculo.us Mootools YUI JSON Dojo Backbase 34. 阅读全文
posted @ 2010-04-29 12:00 nicolaszhao 阅读(572) 评论(0) 推荐(1) 编辑
摘要: 在网页中经常会遇到字符溢出,然后使用省略“...”字符来代替溢出的文本。解决方案有很多种,可以使用服务端程序或客户端(CSS、JS)来处理。在客户端经常有人会用 CSS的text-overflow属性及配合overflow: hidden来处理,但该属性目前只支持IE、Chrome和Safari浏览器。至于服务端还更麻烦,因为使用不同字体(不同字体英文字母会有等宽和不等宽问题),中英文字符混排的因素,导致计算复杂。在这里,由于原先编写的插件有几个致命的bug和依赖于CSS的line-height的定义的问题,现在我重新编写了一个略微完善的插件,也非常感谢同学们的支持。jQuery Text E 阅读全文
posted @ 2010-04-28 18:28 nicolaszhao 阅读(1550) 评论(8) 推荐(0) 编辑
摘要: 如果页面中的图片下载尺寸太大,而且不需要把所有图片显示在页面中,可以使用js来动态加载图片,即友好又加快了整个页面的加载速度。不多说了,直接看下面代码,这里是使用了jQuery库实现,使用的版本为1.4.2的。 DOM结构:用简单的CSS代码调整下结构:javascript实现动态加载图片: 阅读全文
posted @ 2010-04-16 18:24 nicolaszhao 阅读(2753) 评论(0) 推荐(0) 编辑
摘要: 基本原则:内容(DOM)、样式(CSS)、行为(JS)代码分离。使用HTML5的DOCTYPE声明!DOCTYPE html,目前IE6,IE7还不认识,所以会以标准模式渲染页面。但是在其他浏览器下,在图文混排时图片下方会出现间隔空隙。解决办法:页面显示字符集使用HTML5的简写方式:meta charset="utf-8" /遵循xhtml 1.0规则这里只是为了编写HTML代码时,统一规范而已,在HTML5中已经不需要这样严格了,但是我们还是要规范下比较好。 所有标签必须结束; 所有标签必须小写; 标签属性都必须用引号引起来(单引号或双引号); 标签属性必须有值:   所有特殊符号 阅读全文
posted @ 2010-04-15 16:31 nicolaszhao 阅读(1200) 评论(0) 推荐(1) 编辑
摘要: 即使是CSS高手,也难免在书写CSS代码的时候出一些小错误,或者说,任何一种代码都是如此。小错误却往往造成大问题,浪费很多无辜的时间来调试和排错。查看下面这份CSS网页布局中易犯的10个小错误,努力的修正你可能会犯的错误,加速你的前端开发效率。1. 检查html元素是否有拼写错误、是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。2.... 阅读全文
posted @ 2010-04-14 18:10 nicolaszhao 阅读(214) 评论(0) 推荐(0) 编辑