图片预加载

依然范特西╮ 提交于 2020-02-08 04:01:46

图片预加载是为了提高用户在浏览很多图片时的体验效果,比如我们在做图片翻转显示等待特效的时候,为了让图片在转换的时候不出现等待,我们最好是先让图片下载到本地,然后在继续执行后续的操作。与图片懒加载相反,一个是提前加载,一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力。

 

理解:一般浏览器加载图片是按需加载,就是当你请求图片时才给你加载你需要的图片;

        预加载就是在你请求之前将图片加载下来,当你请求时直接从浏览器缓存中响应给你;

     懒加载就是在你请求图片时不给你加载,当你到了指定位置时再给你加载。

 

方法:现有的预加载方法是一次加载全部图片和一次加载部分图片,视项目而定。(待补充......)

 

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

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!