如何将接口返回的切片小图片在前端高效展示成一张大图片？

Question

一张800mb 的大图片，接口返回切片后的小图片，前端如何把这些小图片更好的显示出来，这张图在一屏就可展示出来，最优方法大家有没有？

想法是类似分页那样，一次请求10张，等这10张加载完后接着请求下一页

Answer 1

使用图片缩略图或模糊图？在大图未加载完之前，优先使用模糊图或缩略图展示给用户。待大图加载完成之后，再替换高清图

Answer 2

回答：你描述的效果是不错的，但是实际使用中可能效果没有上述回答中提到的缩略图好用，因为你如果采用将图片按区域裁剪，然后分成很多小文件，这样在前台当然可以拿到每个区域的小图片，然后采用canvas绘制出来这样一般会是图片从上到下，从左到右的加载顺序；和基本jpg的加载思路是一致的，这样实现的优点是不用写太复杂的算法，靠谱；当然，你也需要手动的去将你上传的图片进行单个的裁剪，这个步骤也是需要写一些代码，然后调一调的。另外一种比较常用的则是采用动态缩略图的方式，加载图片时先加载较为模糊的图片，等后续再逐步的将图片变成高清的，在这里面是有较大的难度的，主要针对于图像的处理算法；可以参考这篇文章：https://developer.aliyun.com/article/351619
但针对于你这种较大的图片，800MB，我感觉还是有不小的难度，可能得研究一下哔哩哔哩，看看它有没有什么比较好的方法可供学习参考；关于jpg的加载，可以参考这篇文章：https://www.cnblogs.com/Arvin-JIN/p/9133745.html