Javascript图片从模糊到清楚的过渡显示

在一些图片搜索网站,像Google,我们经常可以看到这样的效果,当我们搜索并查看一个图片时,可能这个图片看起来是非常模糊的,那么等一会之后呢,发现这个图片变清楚了,那么这个究竟是怎么实现的呢?首先,我想到的是在服务器传送图片的时候,能不能使用类似在线播放视频那种流媒体技术,先把图片的模糊信息传过来,然后再传送剩余的信息。实际上,这个想法是非常可笑的,第一:浏览器在加载图片的时候,就是慢慢的接受服务器传送的数据的,这点在浏览器加载比较大的图片的时候看的很明显,图片就是从上到下慢慢加载完成的,这本来就是流媒体的技术。第二,即使服务器能够做到先传一部分模糊数据过来,那么浏览器这时候已经把模糊数据加载好了,清晰的数据过来了,怎么去把原来的覆盖掉呢?显然,这是不行的。这个想法虽然不行,但是却给了我们一些提示,我们能不能把模糊的数据和清晰的数据分开呢?刚开始请求模糊的数据,过一段时间之后再请求清晰的数据?也就是说,干脆弄两中图片,一张模糊的,一张清晰的,浏览器默认是加载模糊的,等模糊的加载好之后,再去加载清晰的。
…阅读更多>>

PHP和Javascript单例模式的对比

什么是单例模式?先来看一下维基百科的解释:单例模式,也叫单子模式,是一种常用的软件设计模式。在应用这个模式时,单例对象的类必须保证只有一个实例存在。许多时候整个系统只需要拥有一个的全局对象,这样有利于我们协调系统整体的行为。比如在某个服务器程序中,该服务器的配置信息存放在一个文件中,这些配置数据由一个单例对象统一读取,然后服务进程中的其他对象再通过这个单例对象获取这些配置信息。这种方式简化了在复杂环境下的配置管理。

概念理解起来可能比较困难,用最简单的话来概括单例模式就是,在创建一个类的时候,通过某种方法,来保证这个类只能产生一个实例。这么做有什么好处呢?我们知道,当我们编写好一个类之后,要产生这个类的实例是非常简单的,直接用new关键字就可以,那么,在一些大型的项目当中,同一个页面可能不是一个人开发,例如有一个Mysql的类,第一个开发人员实例化一个mysql对象,第二人去开发的时候,可能又去实例化了一个db对象,这两个对象其实都是一样的,每次实例化一个对象的时候,可能都需要去连接一次数据库,这样是非常浪费系统资源的。单例模式的出现就是为了避免对一个类的重复实例化问题的产生,从而节省资源。

…阅读更多>>

在邮件服务器上用postfix发送附件

今天利用postfix在亚马逊的VPS上搭建了一个邮件服务器,做好配置并添加了mx记录指向服务器之后,邮件收发均正常。当遇到用postfix发送附件的问题时,难倒我了。在没有安装pop和smtp的情况下,在服务器上只能通过命令行发送信件,命令行的方式只能发送文本内容,而不能发送整个文件。

我们知道,信息在网络上的传输只能采用ASCII编码,那么文件的编码显然不是ASCII的,所以,如果我们要发送附件,肯定是需要对其进行编码的。查找了一些资料,邮件传送用主要的编码方式有 7bit ASCII,8bit ASCII,binary,quoted-printable,base64. 其中base64是最常用的编码方式,为了测试效果,分别用腾讯,163,新浪以及Google向我的邮件服务器发送了一封带附件的邮件,可以看到所有的附件编码都是base64。那么,如果我只想用命令行的方式发送附件,该怎么做呢?幸好linux提供了基于base64的编解码工具base64,使用方法很简单:

1,编码字符串 echo “string”|base64
2,编码文件 base64 文件名
3,解码 echo “code” |base64 -d

…阅读更多>>

Javascript中onmouseout相关问题的分析

问题是这样的,前一段时间需要做一个二级菜单,为了保证浏览器的兼容性,需要用到mouseover和mouseout进行二级菜单的显示和隐藏。当用mouseout从二级菜单的父元素内移动的时候,发现父元素的mouseout事件被触发了很多次,下面是模拟的代码:

<!DOCTYPE HTML>
<html>
<head>
<style>
#parent {width:500px;height:500px;position:absolute;left:50%;top:50%;margin-left:-250px;
margin-top:-250px;background:red;}
#child {width:300px;height:300px;background:blue;margin:100px}
</style>
</head>
<body>
<div id="parent" onmouseout="alert('leave')">
<div id="child">
</div>
</div>	
</body>
</html>

…阅读更多>>

Linux下Nginx服务脚本的写法和原理

在linux下编译使用Nginx的同学都知道,Linux下Nginx本身并没有自动启动的功能,并且关闭或者reload起来都比较麻烦,比如关闭,要么通过killall结束nginx进程,要么进入nginx安装目录通过nginx -t的指令进行相关操作。另外一点,有时候服务器可能有问题需要重启,系统重启之后,nginx还需要手动运行,这样都比较麻烦。下面来讲一下具体的办法:

如果你只需要让nginx开机自己自动,有个最简单的办法,编辑/etc/rc.d/rc.local文件,在最后加入一行”nginx安装路径/sbin/nginx” 即可(不包含引号),系统将会在启动之后自动启动nginx。当然,如果你需要关闭,重启,或者reload就必须要进入到nginx的安装目录,通过/sbin/nginx来操作(也可以直接kill掉nginx主进程来关闭)。可以说,这样是非常麻烦的,特别是在经常要往服务器里添加新网站或者测试参数,添加之后,每次都需要进入安装目录操作。
…阅读更多>>

用javascript在网页中模拟进度条

进度条在windows系统中非常常见,像常见的软件安装部署等。它能够提示用户系统正在运行而不是被卡死,从而避免了用户错误操作,提高了用户体验。在web中,我们可能也会遇到前台和服务器交换大量数据,这时候我们就需要给用户一个良好的提示。如在一些图片浏览网站,当我们点击观看下一张图片时,很多都做了一个正在加载的提示,个人觉得这些提示不仅仅能够留住浏览者,也是衡量一个网站是否真正尊重用户的标志。

当然,这些图片浏览网站,我们没有必要去告诉用户图片下载了多少,因为一个图片顶多就几M,也不会占用太多的下载时间。但是在一些特殊的情况下,用户可能需要等待的时间比较长,这时候如果能够用进度条展示当前任务的完成度是比较好的。
…阅读更多>>