js实现图片预加载（含源码）

网上讲图片与加载的实现方法很多，按照实现方式可以分为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-ssl.duitang.com/uploads/blog/202105/19/20210519212438_ced7e.jpg';

function App(){
	// 等dom都mount了，再预加载，防止影响首屏渲染
	useEffect(()=>{
		preloadImage([imgSrc])
	},[])
	return <div>{'some content...'}</div>
}

💡其他资源可以预先加载吗
video和audio标签有自己的preload选项

💡 首屏图片怎么提前加载
对于一些首屏的必要图片，比如背景图呀，在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载

<link rel=\"preload\" href=\"https://c-ssl.duitang.com/uploads/blog/202105/19/20210519212438_ced7e.jpg\" as=\"image\" crossorigin="anonymous" />