前端性能优化 - 如何将接口返回的切片小图片在前端高效展示成一张大图片？
一张800mb 的大图片，接口返回切片后的小图片，前端如何把这些小图片更好的显示出来，这张图在一屏就可展示出来，最优方法大家有没有？
想法是类似分页那样，一次请求10张，等这10张加载完后接着请求下一页
共有2个答案
回答：你描述的效果是不错的，但是实际使用中可能效果没有上述回答中提到的缩略图好用，因为你如果采用将图片按区域裁剪，然后分成很多小文件，这样在前台当然可以拿到每个区域的小图片，然后采用canvas绘制出来这样一般会是图片从上到下，从左到右的加载顺序；和基本jpg的加载思路是一致的，这样实现的优点是不用写太复杂的算法，靠谱；当然，你也需要手动的去将你上传的图片进行单个的裁剪，这个步骤也是需要写一些代码，然后调一调的。另外一种比较常用的则是采用动态缩略图的方式，加载图片时先加载较为模糊的图片，等后续再逐步的将图片变成高清的，在这里面是有较大的难度的，主要针对于图像的处理算法；可以参考这篇文章：https://developer.aliyun.com/article/351619
但针对于你这种较大的图片，800MB，我感觉还是有不小的难度，可能得研究一下哔哩哔哩，看看它有没有什么比较好的方法可供学习参考；关于jpg的加载，可以参考这篇文章：https://www.cnblogs.com/Arvin-JIN/p/9133745.html
使用图片缩略图或模糊图？在大图未加载完之前，优先使用模糊图或缩略图展示给用户。待大图加载完成之后，再替换高清图
-
本文向大家介绍java将图片转为base64返回给前端，包括了java将图片转为base64返回给前端的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了java将图片转为base64返回给前端的具体代码，供大家参考，具体内容如下 一、controller端代码 二、生成验证码的代码 （从某博客拷过来直接用的） 三、前端显示 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多
-
JIT与GC优化 > untyped（无类型）。 JAVASCRIPT是个无类型的语言，这导致了如x=y+ｚ这种表达式可以有很多含义。 y，z是数字，则+表示加法。 y，z是字符串，则+表示字符串连接。 而JS引擎内部则使用“细粒度”的类型，比如： 32-bit* integer。 64-bit* floating-point。 这就要求js类型-js引擎类型，需要做“boxed/unboxed（
-
本文向大家介绍python实现多张图片拼接成大图，包括了python实现多张图片拼接成大图的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了python实现多张图片拼接成大图的具体代码，供大家参考，具体内容如下 上次爬取了马蜂窝的游记图片，并解决了PIL模块的导入问题，现在直奔主题吧： 前边设置了很多变量，都很直观，然后时获取图片的名称以及对需要拼接图片的数量进行检查，比如你要拼接5*
-
看网上的方法大多是这样的 然后可以在img.load () {} 获取到上传图片的宽高 但是呢更到线上后，上传图片就被拦截了，blob不太行，所以想问一下有不通过blob的方式获取到上传图片的宽高吗，报错信息大致是 有啥解决办法呢，只想获取图片的宽高~~~
-
我开始写前端应用的时候，并不知道一个 Web 应用需要优化那么多的东西。编写应用的时候，运行在本地的机器上，没有网络问题，也没有多少的性能问题。可当我把自己写的博客部署到服务器上时，我才发现原来我的应用在生产环境上这么脆弱。 我的第一个真正意义上的 Web 应用——开发完应用，并可供全世界访问，是我的博客。它运行在一个共享 256 M 内存的 VPS 服务器上，并且服务器是在国外，受限于网络没有备
-
本文向大家介绍JavaScript前端实现压缩图片功能，包括了JavaScript前端实现压缩图片功能的使用技巧和注意事项，需要的朋友参考一下 为什么要前端来压缩图片 最近在做一个移动端h5上传图片的功能，本来这个功能并不复杂，只需要将图片文件通过axios传到服务端即可，但是考虑到现在手机设配的拍照功能十分强大，随便一张照片都能动辄五六兆，而服务端的要求是上传图片必须小于两兆，而且直接传这么大图
-
本文向大家介绍详解基于python的多张不同宽高图片拼接成大图，包括了详解基于python的多张不同宽高图片拼接成大图的使用技巧和注意事项，需要的朋友参考一下 半年前写过一篇将多张图片拼接成大图的博客，是讲的把所有图片先转换为256×256的图片后再进行拼接，今天看到一个朋友的评论说如何拼接非正方形图片，如47×57，之前有个朋友也问过这个，我当时理解错了，以为是要把不同尺寸的照片如32×45、5
-
手机端一切正常 使用Vant Weapp组件库（版本："@vant/weapp": "^1.10.18"） 点击上传按钮，没反应，不输出11111111111111 点击删除，成功输出222222222 ** 补充····································································** 我看了一下源码中的uploader组件的ac