管理好页面图片,减少页面加载时http连接,优化页面
浏览器渲染页面的时候,遇到图片标签或者css中的背景图片设置,先会到本地缓存中寻找是否已经下载了这张图片,如果已经下载过了就直接从缓存中加载;否则会到图片指定的路径下载到本地缓存。而且这种下载是阻塞式的(部分浏览器内核已经实现异步加载图片。比如火狐)。也就是说在下载这些图片的时候,页面渲染处于暂停状态,必须等到图片下载完成了再继续渲染。 所以,如果一个页面中有大量的图片需要加载,先不说图片本身的大小对下载速度的消耗,每次图片下载都是一次http请求,都要经历3次协议握手,这对页面加载速度的影响是显而易见的!!如果图片再大一点,每张一两百K,杯具了…… 那么如何管理这些页面图片、背景图片以加快页面渲染速度呢?下面,我将我的一些经验分享给大家。 一、页面图片处理 1.延迟加载 1)所需技术: lazyload 2)原理: 先使用一种空白的图片grey.gif代替指定的图片元素(lazyLoad允许指定页面上那些图片需要延迟加载。比如$("img.lazy").lazyload()表示class为lazy的图片延迟加载。$("img ").lazyload()表示所有图片都延迟加载)。 当页面滚动条滚动到该图片时,再将图片的src还原。 有时,你可能浏览某些网页时,滚动页面滚动条时发现有些图片显示为正在加载。就是使用这种技术实现的。