图片预加载效果的实现

使用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,目前有:

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' 

+
              'Feed data:\n' + 

responseDetails.responseText);
    }
});

较详细一些的内容,可以去Dive Into Greasemonkey查阅.

什么是greasemonkey?

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
    'delta'    => 5,
    'itemData' => $data,
);
$pager = & Pager::factory($pager_params);
$n_pages = $pager->numPages();
$links = $pager->getLinks();
?>


    
    


PEAR::Pager example with JavaScript

<?php echo $links['pages']; ?>
<?php for ($i=1; $i < = $n_pages; ++$i) { echo '
'; echo '

Page '.$i.'

'; foreach ($pager->getPageData($i) as $item) { echo 'Item '.$item.'
'; } echo ''; } ?>

例子中把分页的所有数据放入一个div标签,定义了两个比较重要的参数就是path(为空)和fileName,fileName原本应该是链接的文件名,但是这里用javascript替换了。

Ajax上阵

这个例子包括三个文件page.html,server.php,testdata.php
Continue reading “Pear::Pager和AJAX的整合应用”

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.

没话说,这是一个ajaxjavascript类库,Yahoo出品,嘿嘿。

使用心得

  • 打开程序包的build/connection目录,下有connection.js,connection-debug.js,connection-min.js,这三个文件其实内容都一样,第一个是正儿八经的源代码,中间那个不用说可以用于debug,最后那个也不是废柴,它经过压缩处理,javascript代码仅仅只有8k,相对connection.js高达20k肥硕体积来说,显然更经济,可用于线上系统。
  • 这三个文件最好都要的:
      
      
      
      
      
        
      
    
  • 最后说个特好用的方法 —— setForm,这功能可以解析某个表单的内容,自动拼凑出用于ajax提交的数据串,甚至可以用于文件上传,实在是居家旅行必备。
    var formObject = document.getElementById('aForm');   
    YAHOO.util.Connect.setForm(formObject);   
    // This example facilitates a POST transaction.   
    var cObj = YAHOO.util.Connect.asyncRequest('POST', 'http://www.yahoo.com', callback);   
    

详细说明

http://developer.yahoo.com/yui/connection/

这阵子犯懒,只字未写,惭愧惭愧

版权声明:可以任意转载,转载时请务必以超链接形式标明文章原始出处和作者信息及本声明

用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 tell it where to attach
searchControl.draw(document.getElementById(“searchcontrol”), drawOptions);

// 开始搜索
searchControl.execute(“Google”);
}
[/javascript]

目前这个api的版本是0.1,正式版1.0发布之后,搜索结果将会有广告显示,显然这个午餐不免费。