图片优化的一般方法
在本文正式开始之前，笔者先提提图片优化的一般方法，了解图片优化的方法有助于理解后面图片加载实现形式的多样化。
一般常见的图片优化方法有：
减少文件体积大小
减少图片资源请求数(合并HTTP请求)
减少图片文件体积大小
可以从
压缩优化图片大小
采用合适的图片格式
两个途径来进行对体积大小的优化。
这里推荐阅读《Web性能优化：图片优化》，博主在文中讨论如何更优地选择图片的恰当格式以及推荐了优化图片大小的工具。
减少图片资源请求数(合并HTTP请求)
减少图片资源请求数(合并HTTP请求)的途径除了最为普遍的
合成雪碧图
还有
使用DataURL
这里特别提下，采用DataURL这种方式将图片被转换成base64编码的字符串形式的，如果单纯地“嵌”入HTML中是不会被缓存的，但是加在CSS或JS文件中，通过缓存CSS或JS则达到了间接缓存以base64编码的图片。
这里推荐一个将图片转换成Base64编码的字符串的在线工具： DataURLMaker在线工具
因为本文的重点不在于讨论图片优化的内容，所以这里就简单总结下对图片进行优化的方法，对于更详细的内容，笔者则按下不表了。
对于触屏页面中常见的的图片资源加载方式，笔者归纳为三类：正常加载、预加载、懒加载。
正常加载
所谓正常加载，则是开发者不采用人为地方式去干扰，按照浏览器正常加载的方式去加载渲染页面。
适合采用正常加载的方式的情景是图片数量较少以及图片体积较小，对触屏页面呈现的用户体验不影响或影响较少。
但是在现有的大环境中，限制于网络宽带等客观的因素，而且触屏页面的华丽炫目的设计都需要依靠图片，单纯的CSS是无法满足要求的，对图片的应用还是有一定量。
所以，能够毫无顾忌地采用正常加载的方式的案例还是比较少的，目前笔者暂时是没有见过。
预加载
在触屏页面处理中最为常见的可以是说预加载，几乎每个触屏页面的案例都使用到了这种方式。
为了完整地呈现页面给用户，开发者会通过一定的技术预先加载图片资源（以及页面其它资源），等加载渲染完毕再把页面呈现给用户。
而根据这个预加载的过程是否有明显的进度提示，笔者把常见的预加载方式划分为两种形式：
显性预加载
隐性预加载
显性预加载
显性预加载指的则是处于预加载过程时页面有明确的加载提示，比如进度条或者是Loading图标。
譬如，我厂的触屏页面案例《点燃你心中的野兽》，在预加载过程提示加载的进度，让用户有个心理预期，减少等待的烦躁感。
---------------------
作者：phj_88
来源：CSDN
原文：https://blog.csdn.net/phj_88/article/details/80949448
版权声明：本文为博主原创文章，转载请附上博文链接！