Google的两个图片预加载技术

由 愚人码头 撰写 　http://www.css88.com/archives/595

图片预加载技术是为了提高页面性能，改善用户体验。
Google的这两个图片预加载技术很简单，一般都能看得懂。
第一个：Google首页的中的一个图片预加载
打开Google首页我们用抓包工具可以分析出Google首页中加载了一张图片：http://www.google.cn/images/nav_logo3.png

 

其实这张图片Google首页根本就没有用到，在首页加载是为了让这张图片提前加载，存入本地缓存。这样在搜索结果也就可以直接读缓存中的图片，而不用再加载了。

实现的方式也很简单，在body上加了个onload事件：

JavaScript代码

onload=“sf();if(document.images){new Image().src=’/images/nav_logo3.png’}”

所以，关键还不是在技术，而是怎么提高页面性能，改善用户体验。

 

 

第二个：使用picasa的时候，注意到它首先是显示模糊的图片，然后图片突然变得清晰，这样做有一定的好处就是不会让用户感觉到图片加载过程中的空白时间。

主要是实现思路：点击相片缩略图的时候，让缩略图首先加载到图片展示区，当大图加载完成后，将展示区中的缩略图替换成加载完成的大图；

本身picasa很复杂，我做了简单的原型demo：http://www.css88.com/demo/imgloading/imgloading.html

注意：重复测试请先清楚本地缓存