前几天碰到网页需要逐帧播放几百张图片，如何加载图片的问题，我去读了很多讲处理方法和应用情景的文章，在这里顺着我自己思考这个问题的思路整理一下。
一：了解了图片懒加载和预加载的定义、用法和应用场景懒加载和预加载
懒加载:滞后加载，预加载:提前加载。对于这次这个内容庞大的网页，当然是用预加载的方式处理图片.
二：尝试使用上文提到的ajax方法，一次异步加载50张图片，但是受限于图片大小和网速，通过调试器查看network一栏时，发现加载完成需要10秒以上，如果用户进入网页马上点击播放，图片来不及加载，网页就会空白。这属于一个比较'硬'的问题了，在用户网速不定的情况下，我想到将图片更好地压缩一下，将其他格式的图片转化成webp格式，转换了一张试了一下，图片的大小只有原来的1/7，这应该是一个有效的方法。
三：借鉴让图片加载这件事儿变得更美好，我想到ajax预加载图片的方式是一张图片一次ajax，因为每张图片对应一个uri，一次ajax也只能获取一个uri也是正常的。如果一次请求的数据里有多张图片的信息就好了。这篇文章里提到了两个合并http请求次数的方法，分别是将图片转化成base64格式的字符串
采用DataURL这种方式将图片被转换成base64编码的字符串形式，如果单纯地“嵌”入HTML中是不会被缓存的，
但是加在CSS或JS文件中，通过缓存CSS或JS则达到了间接缓存以base64编码的图片。
和雪碧图。这两种方法都类似于webp方法，直接改变图片源的形式来加快加载速度。
四：那有没有代码级别的优化方案呢?还真有一个，通常用的ajax预加载一批图片，这些ajax是异步的。而在某些情形下，使用同步的方式，在图片之间有逻辑顺序(比如超链接跳转时，那个超链接图片应该比跳转后页面的图片先加载出来)时，将更关键的(critical)图片先加载出来是更优的解决方案。但是这样并不会缩短加载完所有图片的耗时，所以这个方法不适用于我这次遇到的问题。这个方案来自A better way to preload images for web galleries
五:还有就是使用别人写好的插件，这个暂时不考虑。
总结一下，图片的懒加载和预加载一个是提高了页面初始化速度，减轻服务器负担，一个是提高用户体验，增加了页面初始化时间，目前能查到的实现方法都比较一致，没有太多差异。那么如何解决我遇到的这个比较硬的问题呢，想了一下，软件层面还是挺有难度的，只能从更加底层比如http协议或者浏览器层面看看有没有可以优化的地方，这样应该针对这个问题在前端方面就已经探究完全了吧...