html如何使多张图片滑动不卡顿,Web端大量图片同时加载卡顿问题的优化方案

案例

由于业务的需要，需求方需要实现一个大量图片同时加载的需求。在实现这个需求的过程中，可能会遇到很多的坑，这里小编也总结了一些优化方案，我们可以一起来看看。

具体场景

在描述如何解决问题，我们现在先来申明，问题是什么？ 需求的主要内容是在某个页面显示 1~1000张，200~500k大小的图。好消息是这些图片来源于本地硬盘而非网络。(否则这个问题就要变成优化网络....)

踩坑历程

由于不是纯前端的项目，笔者可以从本地文件夹中读取文件。然后一段代码劈里啪啦的就出现了。

const fileList = this.props.fileList;

return (

{

fileList.map((file) => {

})

}

< div >

)

就在笔者满心欢喜的认为这个需求基本搞定了，该去楼下加鸡腿的时候。无情的现实狠狠的抽了我一巴掌。随着网页的刷新，一张纯白的画面展示在了我的面前，然后只见图片一点一点的从上面加载出来。 我不禁陷入了沉思，是CPU跑不动道了还是内存飘了？在一想，我这电脑都这个表现，真要上线了，这客户能忍受吗？不对，就这表现，没上线前产品小姐姐就的把我ko了...

方案一 懒加载

这种场景下想必大家第一反应也是懒加载。简单介绍一下图片懒加载。常见的图片懒加载方案是指页面加载时