网上讲图片与加载的实现方法很多，按照实现方式可以分为CSS，js和ajax三类。本文聚焦于工作中
最最最最常用的js预加载方式，并介绍使用场景
💡几个问题
什么类型图片资源需要预先加载
一般是非首屏，且图片资源较大>1MB，有必要进行预先加载
一些画册展示网站，会在用户登录界面把下一屏的图片都加载了
预加载的原理
提前发送网络请求，先拿到资源。等到真正渲染到元素时，再发送请求，直接击中浏览器缓存，这样更快，节省资源加载时用户的等待时间
💡图片预加载代码
function preloadImage(srcList: string[], callback = (e?) => {}): void {if (!Array.isArray(srcList) || srcList.length < 1) return;srcList.forEach((i) => {const img = new Image();img.onload = callback;img.onerror = callback;// 如果用Rax的Picture引入组件，那么会进行优化，带上后缀_.webp。本地图片以data:开头，会被编译为base64，不用加后缀// img.src = i.indexOf('data:') === 0 ? i : i + '_.webp';// 用原生<img/>标签引入 不存在要修改src问题img.src = i;});}
💡在react或者rax中使用
const imgSrc = 'https://c-/uploads/blog/05/19/0519212438_ced7e.jpg';function App(){// 等dom都mount了，再预加载，防止影响首屏渲染useEffect(()=>{preloadImage([imgSrc])},[])return <div>{'some content...'}</div>}
💡其他资源可以预先加载吗
video和audio标签有自己的preload选项
💡首屏图片怎么提前加载
对于一些首屏的必要图片，比如背景图呀，在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载
<link rel=\"preload\" href=\"https://c-/uploads/blog/05/19/0519212438_ced7e.jpg\" as=\"image\" crossorigin="anonymous" />
