如何通过js异步快速加载大量图片？

Question

项目里需要大量的图片在打开页面时预加载，有什么方法用js快速加载大量图片么

Answer 1

没什么快速加载的办法 可以做一些性能优化，加载速度优化

例如懒加载 原理就是将页面中的img标签src指向一张小图片或者src为空，然后定义data-src（这个属性可以自定义命名，我才用data-src）属性指向真实的图片。

例如可以把加载函数绑定到scroll事件上 这样加载 但是这个有弊端（会高频率触发函数）你可以利用节流函数的方法来改进 （思路就是比方scroll 滚动不超过多少高度 就给个定时触发等等）

Answer 2

没什么快速的方式，最主要的就是按需加载，先加载首屏中的图片，后续页面中的图，等页面滚动到的时候再进行加载。

同时，对图片进行压缩，也能提高图片的加载速度。

Answer 3

如果是2M小水管，再牛b的js也快不到哪儿去
在这种情况下能做的就是lazyload，百度搜索一大堆
优化图片 给你个在线优化图片的网址：https://tinypng.com/