大连网站建设之利用MXHR技术优化上一次的图片滑动

 

对于上一次自己写的图片滑动小效果,本来只是写着玩权当练习,起初不以为意,直到有一天我去学校的机房上课,顺便就打开了那个页面试试,我当时就崩溃了,于是决定做做修改,顺便说说这个MXHR技术。先说说学校机房的配置：IE6+1024*768像素+特别坑爹的网速。于是用学校机房的电脑打开的时候首先界面布局乱了,因为分辨率的问题，当时没有考虑这个问题，其次就是一直在加载，终终走的时候也未能加载完整个页面。于是就决定要做修改(此次修改在IE6,7,8中会有问题,具体看下面)。

修改后的示例页面

这次做的改进有：改了界面,考虑到了分辨率低的情况,用MXHR加快了页面加载速度。接下来就说说MXHR技术。

MXHR全称为Multipart XMLHttpRequest。它允许客户端只用一个HTTP请求就可以从服务端向客户端传送多个资源。这样就能节省大量的时间,因为HTTP请求是很花时间的。在本例中所有的图片只进行了一次HTTP请求,并不是每张图片一次请求。所以理论上能提高3-5倍的加载速度。对于上一次纯HTML和JS的代码,本次在后台还使用了PHP。利用PHP读取图片,并将其转为base64编码。这里要说明的是对于img标签的src它不仅支持直接写图片路径,还可以用这样的方式：

src=”data:image/jpeg;base64,jpg图片的base64编码”。以下为后台PHP代码：

这样就能够用PHP读取所有的图片并转换为base64编码,并在每个图片编码后插入分隔符。然后一次性的将所有图片传入到客户端,再使用JS进行分割，这样就能将多次HTTP请求降低为一次。同样的方式可以用到javascript文件，css文件,html片段等。

但是，世上并没有完mei的东西，这东西听上去挺美好。实际上也有很大的问题。首先IE6,7不支持data：image的方式,需要变通。IE8虽然支持但是当图片大于26KB就会出问题。所以如果你用的是IE8及IE8以下的浏览器查看本示例页面，那么就会有问题。我起初用IE8打开的时候会报错，我也不知道哪儿出错了，后来查了一下，网上说data:image的方式，IE8很大图片不能超过32KB，但实际自己测试超过26KB就已经报错。还有一个问题,这样的方式不会令浏览器缓存,所以每次都是一次全新的请求。

虽然它本身的一些问题,导致了并没有大范围的使用。但是针对某些特定情况，它也具有很明显的优势，你可以选择性的使用。

---