图片预加载是为了提高用户在浏览很多图片时的体验效果,比如我们在做图片翻转显示等待特效的时候,为了让图片在转换的时候不出现等待,我们最好是先让图片下载到本地,然后在继续执行后续的操作。与图片懒加载相反,一个是提前加载,一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力。
理解:一般浏览器加载图片是按需加载,就是当你请求图片时才给你加载你需要的图片;
预加载就是在你请求之前将图片加载下来,当你请求时直接从浏览器缓存中响应给你;
懒加载就是在你请求图片时不给你加载,当你到了指定位置时再给你加载。
方法:现有的预加载方法是一次加载全部图片和一次加载部分图片,视项目而定。(待补充......)
js预加载图片使用new Image()基本够用了
new Image().src = 'http://img02.taobaocdn.com/tps/i2/T1iQhUXnxpXXXXXXXX-171-48.png'; //淘宝
new Image().src = 'http://static.paipaiimg.com/module/logo/logo_2011_02_22.png'; //拍拍
new Image().src = 'http://co.youa.baidu.com/picture/services/images/logo.png'; //有啊
new Image().src = 'http://img1.t.sinajs.cn/t35/style/images/common/header/logoNew_nocache.png';
预加载css、js、图片方法介绍及各浏览器测试效果:http://www.jb51.net/article/42085.htm
new Image预加载图片详解:http://www.cnblogs.com/mz121star/archive/2012/11/01/javascript_preloadimages.html
预加载常见的三种方法:http://www.jb51.net/article/57579.htm