前端大量图片优化

首先说一下，该问题的背景，之前我做了一个照片管理软件，反正就是前端页面需要展示的都是图片，如图
这些照片都是用手机拍摄的，最小的也在3兆以上，所以当页面加载出来照片的时候，此时页面会非常的卡顿，甚至直接卡死，想了很多办法也没解决，甚至做过图片的懒加载，流加载，感觉效果等于是没有。后来想了一个办法。就是压缩图片，但是呢压缩图片不能影响原有图片的存在，所以呢，该压缩图是另存的一份图，多次尝试在上传的时候压缩图片，这个时候的话基本上必定内存溢出，后来想了一个方法，在加载数据的时候压缩图片。

思路大概是这样的，首先我设计表的时候有个字段存放的是原图的存放路径，此时我添加一个新字段，用来存放压缩图路径的，（我的图片都存放在服务器的D盘里里面），当我去加载数据的时候，我先去判断压缩图字段（minipic）里面是不是有值，如果有值的话，说明该图经过处理了，如果没有值的话，说明是新上传的图片，此时给他生成一个压缩图，同时把该字段保存起来，前端显示的话，就用该压缩图的路径去显示，这样的话，我尝试了一下，页面确实非常流畅，毫无卡顿感。思路讲完了，上代码

<dependency>
            <groupId>net.coobird</groupId>
            <artifactId>thumbnailator</artifactId>
            <version>0.4.8</version>
        </dependency>
	</dependencies>

这个是压缩图的实现方法，直接调用即可

Thumbnails.of("D:/picpath/"+list.get(i).getImg()).size(400,500).toFile("D:/picpath/minipic"+list.get(i).getImg());

我的逻辑代码如下：

来对比一下前后效果
未压缩之前

压缩之后

对比一下 效果还是很明显的，即使页面有几百张图，也没啥压力。

然后看我的存放图片的文件夹，这是所有上传的图片

压缩图都存放在minipic文件夹里面

每当我上传新照片后数据都会重新加载，此时没有压缩图的数据也都会生成新的压缩图，页面上的img属性显示的都是压缩后的图片，当我们单独点击查看的时候才会让他他看原图