Day: May 9, 2015

html照片从模糊到清晰的渐变加载显示方法

1.背景介绍 在网络相册应用中用户查看照片是最朴素的需求,当网络比较慢的时候查看照片等待的时间是比较长的,用户体验会很差。   2.现状 现在加载照片的方法主要有一下两种: (1)最原始的方式在html页面直接用img标签加载显示照片。该方法在网络速度比较慢或者要显示的照片比较大的时候会页面出现空白的等待过程,并且不能开始给用户看到照片大概的情况,用户体验比较不好 (2)在html页面先用img标签加载显示照片的缩略图,同时用javascript隐藏的加载照片的原图,等照片大图加载完成后再将原图显示到页面中。以下是流程图: 该方法用户可以先看到的是模糊的小图,等照片的原图加载完后才能看到真实的照片,如果网络慢的话中间等待的时间也是比较长的,用户就一直看到模糊的小图,用户体验也不好。   3.我们的解决方案 QQ相册最近做的一些优化方法解决了上诉两个方法的缺点和满足了用户查看照片的需求:第一时间看到照片大概情况和尽可能快的看到清晰的原图。该方法使用缩略图和原图同时加载并叠加显示,先加载缩略图并拉大显示,大图叠加在缩略图上面同时加载。缩略图很小通常很快就能给用户看到照片模糊的效果,大图加载过程中从上往下逐步覆盖缩略图,这样用户就可以看到加载过程中的大图。 (1)示例图   如上如所示,本方法的处理步骤是: 1.获取照片缩略图和原图的URL,获取照片的长和宽; 2.加载并显示照片缩略图,将缩略图按照片的长和宽拉伸显示,这时用户看到的是模糊的效果; 3.加载并显示照片原图,将原图叠加在缩略图上面显示,原图加载多少就显示多少,没有加载的还是显示缩略图,逐步将缩略图覆盖掉,原图在加载的过程中用户看到的是照片从模糊到清晰的渐变效果。  … Read More

php输入流php://input的使用分析

在做一个摄像头拍照然后上传的功能,php中使用php://input来获取内容。于是就了解了下php://input。 从官网信息来看,php://input是一个只读信息流,当请求方式是post的,并且enctype不等于”multipart/form-data”时,可以使用php://input来获取原始请求的数据。 看一个简单的例子。   客户端就是一个表单,非常简单。 <form action="" method="POST"> name: <input type="text" name="name" value="tom" /><br /> age:<input type="text" name="age"… Read More

php框架–php框架的连贯查询实现原理 (__call)

如果你是一名使用过多种框架的php程序员,你一定见过这样的查询语句: $result = $mysqlDb->limit('0,10′)->order('id desc')->findall(); 上面的查询语句,连续使用->操作符进行操作,并最终返回一个查询结果,那么这是如何实现的呢。 我们来简单分析一下: ->操作符用来访问对象,上面的语句一共使用了3次->操作符,而最后一次返回的是查询结果,这说明,前2次->访问后,返回的 应该是一个对象,因为在php中,如果你对一个非对象使用->操作符是不可能的。这告诉我们,$mysql实例中的limit和order方法都返 回一个对其所在类自身的引用即 return $this,了解了这一点,那么我们就可以实现连贯查询了。请看站长写的示例代码: <?php /* *类功能:实现数据库的连贯查询操作 */ class mysql_query{… Read More

跨浏览器兼容的HTML5视频音频播放器

HTML5的video和audio标签是用来在网页中加入视频和音频的标签,在支持html5的浏览器中不需要预先加载Adobe Flash浏览器插件就能轻松快速的播放视频和音频文件。而html5media.js可以在不支持html5的浏览器上使video和audio标签生效。 How to enable <video> and <audio> tags in all major browsers To make HTML5 video and… Read More

Magento: 显示所有子库存 Show inventory of simple product of configurable products

//$_product = $this->getProduct() foreach ($_product->getTypeInstance(true)->getUsedProducts ( null, $_product) as $simple) { $stock = Mage::getModel('cataloginventory/stock_item')->loadByProduct($simple)->getQty(); $sizename = $simple->getResource()->getAttribute('size')->getFrontend()->getValue($simple); echo… Read More

Ubuntu文本检索神器——SearchMonkey

有时候,我们需要搜索包含有某些特定文本或单词的文件。如果你是个开发者或者程序员,经常会碰到这样的问题。现在,我们总是能够使用Linux命令来查找包含有指定文本的所有文件,但不是每个人都热衷于命令行。我见过那些优秀的程序员,他们更多的是依赖于图形化工具,而不是命令行。如果你也更喜欢图形化工具,那么SearchMonkey对于你而言是个十分完美的应用。 SearchMonkey是你的桌面搜索引擎 SearchMonkey递归搜索目录,因此你可以在它工作的时候坐下放松一下。用户可以使用强大的正则表达式来搜索文件名和内容,这使得SearchMonky返回结果时更为精确。   此外,SearchMonkey不仅仅给你列出可能包含有你正在查找的内容的文件,它也高亮显示匹配的内容。 在Ubuntu 14.04中安装SearchMonkey SearchMonkey可以在Ubuntu 14.04的软件仓库中找到,你只需要通过Ubuntu软件中心或者通过以下命令来安装: sudo apt-get install searchmonkey 安装完毕后,你可以从Unity Dash中启动SearchMonkey。界面简明直观,易于使用。   SearchMonkey帮助你快速查找到你所需要的文件,不需要先构建一个驱动映射。每次搜索都是实时的,结果也会在找到后立即在上下文中显示!尤其,它还是一个免费又开源的软件。  … Read More