图片预加载效果的实现

使用picasa的时候,注意到它首先是显示模糊的图片,然后图片突然变得清晰,这样做有一定的好处——picasa的图片翻页是用javascript实现的,如果直接载入大图,中间势必会有个空档,用户在这中间会感觉很空虚~~ 于是我花了点时间,打探它的实现方式,发觉很简单,不是用的lowsrc之类的标记,而是简单的js。 代码示例 var img = new Image(); img.src = “http://imghost/big_640_480.jpg”; img.onload = function() { document.getElementById(‘myImage’).src = this.src; } 如此这般,待大图载入完成之后,利用js替换原小图的src,就完成了图片预加载效果。关键点是图片的onload事件利用。

利用Google Ajax Library API加速常用js类库的载入

google前不久推出了Google Ajax Library API,说白了就是提供几个知名js库的host,目前有: jQuery prototype script.aculo.us MooTools dojo google提供的这批js类库都有使用cdn,同时提供压缩和非压缩版本,并gzip输出。比如Prototype在未压缩前是124k,压缩后则只有30k,而jquery经过瘦身以后,也是从97k降到了16k。 这项服务的意义在于,如果各个网站都使用google提供的某个js类库比如jquery,那么由于浏览器缓存的缘故,用户就可以避免下载相同内容的js,这样也就能提高js的载入速度了。 google ajax library api使用方法 传统方式 使用google.load载入 下面是一段小小的视频用来解释它的工作原理: Update 昨天在某个小页面上尝试引入google提供的jquery.min.js,结果让我大失所望,虽然有时候访问速度很快,但是偶尔能刷出22秒以上的响应时间,如果是这样不稳定的话,那么实在是不敢放心使用。

Ajax Vs Flash

在RIA应用中,到底应该使用Ajax,还是使用Flash呢?它们各有长处,让人难以取舍.下面就它们的特点做一个小小的总结. Javascript + 不需要额外的插件. – 不同的浏览器下可能会产生不同的行为 – 不能访问音视频设备 – 可能会有少数用户会关闭javascript – 如果你写的代码很烂,大家都能看到 Flash – 需要额外安装插件 + 在各种浏览器上,如果flash player的版本一致,那么flash的行为也会基本一致 – 用户可能不会安装有相同版本的flash player + 可以直接访问音视频设备 – 可能会有很多用户屏蔽flash + 如果你写的代码很烂,不用担心,大家都看不到

Yahoo搜索大变形

昨天听说yahoo搜索大变形,跑去试了一下,果然有不同的感受。首页就不说啦,没啥值得浪费口水的,搜索结果页面有巨大变化: 每次只显示五条结果 翻页放在右侧纵向排列 左青龙(相关搜索词)右白虎(图片,音乐,博客等相关)内容在中间 让人惊讶的是翻页非常快,点点就出来了,我要是用鼠标在右边翻页一直点下去咋办?那会没完。祭出firebug窥探之,每一次翻页均会有一个ajax提交: POST http://www.yahoo.cn/data:foo (656ms) 正如我们看到的,post方式的提交,返回了一堆乱遭遭的数据,以我有限的知识看来,这八成是json格式。翻页还支持快捷键,j/k 控制上下翻,八成是vim的爱好者干的好事,没说的。 用着挺爽

greasemonkey内置了ajax管理器

greasemonkey这工具,就好像web开发人员的作弊器一样,好玩。经常去的网站,若是看着不顺眼,就祭出greasemonkey对它页面元素的位置调整一番,把主题内容字体搞大,把广告隐藏不见,别人的网站我做主,倒也有一番小小乐趣(我可没有hack它的站点哦)。这些天看看文档,原来人家已经内置了xmlhttpRequest的api,不用费牛劲去外部导入一些js来搞这些基础工程了。 Description GM_xmlhttpRequest makes an arbitrary HTTP request. The details argument is an object that can contain up to seven fields. 一个greasemonkey的ajax调用 GM_xmlhttpRequest({ method: ‘GET’, url: ‘http://greaseblog.blogspot.com/atom.xml’, headers: { ‘User-agent’: ‘Mozilla/4.0 (compatible) Greasemonkey’, ‘Accept’: ‘application/atom+xml,application/xml,text/xml’, }, onload: function(responseDetails) { alert(‘Request for Atom feed returned ‘ + responseDetails.status + ‘ ‘ + responseDetails.statusText + ‘\n\n’ + […]

Pear::Pager和AJAX的整合应用

作为一个PHP开发人员来说,大概很让人受用的一个东东就是Pear的类库了。我们知道,Pear::Pager是专门处理分页的,而Pear::HTML_AJAX则是Ajax应用的一些类库。但是Pager也不仅仅是只能用于html的分页链接,它已经为比超女还红的Ajax做好了准备,下面看看这两个包如何整合应用。 Pager and Javascript 现在走出第一步,Pager已经能够构建出javascript的链接了,和Ajax整合,理论上应该也是能够实现的,下面是Pager和javascript分页的一个例子: require_once ‘Pager/Pager.php’; $data = range(1, 100); //an array of data to paginate $pager_params = array( ‘mode’ => ‘Sliding’, ‘append’ => false, //don’t append the GET parameters to the url ‘path’ => ”, ‘fileName’ => ‘javascript:revealDiv(%d)’, //Pager replaces “%d” with the page number… ‘perPage’ => 10, //show 10 items per page […]

Connection Manager Of YUI

前些天试用了Yahoo! UI Library的Connection Manager工具,略有些心得,这里丢块板砖出来,能不能引到玉,那是后话。 Connection Manager能干什么 The Connection Manager is a utility that enables you to make in-page HTTP requests through a simplified interface to the XMLHttpRequest object. The Connection Manager handles cross-browser instantiation of XMLHttpRequest, negotiates the server response and uses a callback pattern to process the response data. 没话说,这是一个ajax的javascript类库,Yahoo出品,嘿嘿。 使用心得 打开程序包的build/connection目录,下有connection.js,connection-debug.js,connection-min.js,这三个文件其实内容都一样,第一个是正儿八经的源代码,中间那个不用说可以用于debug,最后那个也不是废柴,它经过压缩处理,javascript代码仅仅只有8k,相对connection.js高达20k肥硕体积来说,显然更经济,可用于线上系统。 这三个文件最好都要的: 最后说个特好用的方法 […]

用php5来赚大钱

写这个标题一定会被打死。 可能这个幻灯跟赚钱没关系--Getting Rich with PHP 5(IE之外的浏览器可看)。但是个人认为它所介绍的程序优化和分析的方法比较有意思,广大php爱好者如能掌握,说不定真的就解决了温饱问题进而赚了大钱。 幻灯的大义: 首先你准备建一个大流量的网站 这个网站真的很大,可能会有这些特点: web 2.0的亲戚 有tag系统 ajax用的港港的,溜的很 有500000活跃用户 等等。。。 初步估计这个流量大概是: 平均:578次访问/秒 峰值:578 x 3 = 1700次访问/秒 而且这个网站是用Linux+Apache+PHP做的,怎么样?头大了吧。 怎么样用尽可能少的资源,服务更多的人群呢?这就是这个幻灯的最终效果,省下了服务器,也就是赚了钱,对吧?至于您的50万流量的网站有没有转下去并因此赚了钱,那是另外一回事。 用到的关键词 Postgresql,Mysql,APC,Callgrind

试用google search的Ajax api

最近两个月访问google老抽风,也8知道伟大的GFW使了些什么手段。虽然形式不容乐观,仍然是看到了狗狗发布了google adsense api和google search ajax api,显然后者更具有实用价值。因此俺用迅雷不及掩耳盗铃之势申请了api key,在参考了online manual之后,还是用实际代码说话吧: [javascript] function OnLoad() { // Create a search control var searchControl = new GSearchControl(); // 搜索选项,这里设置为自动展开 var options = new GsearcherOptions(); options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN); // 添加了一个网页搜索 searchControl.addSearcher(new GwebSearch(), options); // 搜索结果输出选项,列表显示 GSearchControl.DRAW_MODE_TABED是另外一个选项,tab方式显示各种搜索结果 var drawOptions = new GdrawOptions(); drawOptions.setDrawMode(GSearchControl.DRAW_MODE_LINEAR); // 每次显示8条搜索结果 searchControl.setResultSetSize(GSearch.LARGE_RESULTSET); // Tell the searcher to draw itself and […]