网上讲图片与加载的实现方法很多,按照实现方式可以分为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" />