一般来说，门户网站和官方网站类展示型网站都会比较重视首屏的加载速度和用户体验， 在使用了诸如懒加载，cdn，gzip等优化措施后，如何给用户更好的浏览体验。是一个需要持续优化和改进的事情，毕竟，没有人嫌自己的网站速度太快体验太好。
总的来讲，一个正常的网页，其打包后的js和cs上代码，都应保持在几十K，最多一两百K之内。而图片，往往是影响网页的加速速度的罪魁祸首
这里给的思路，就是在优化图片加载上做文章。很简单的几行代码，一方面，实现图片的懒加载，优化图片的加载速度。另一方面，给这些图片增加一个过渡属性，使其看起来更加友好而不生硬。
css 部分
// 在 css 中添加过度属性
img {
transition: opacity 1s;
opacity: 1;
}
// 添加img选择器
img[data-src] {
opacity: 0;
}
js部分
// js部分，选择所有需要懒加载的element，添加onlaod事件
useEffect(() => {
const arrImg1 = document.querySelectorAll('img[data-src]')
arrImg1.forEach((item: any) => {
item.setAttribute('src', item.getAttribute('data-src'));
item.onload = function () {
item.removeAttribute('data-src');
};
})
}, [])
HTML 中
<!-- 给需要懒加载和过度动画的图片对象添加属性。注意 src属性替换成data-src，如果不替换只是添加的话，渲染时仍然会优先渲染img图片，使效果打折扣 -->
<img className={'imgBox'} data-src={'/static/img/asset1.png'}/>
tips
- 在浏览器渲染时，如果设置了设置了src属性，依然会和其他img图片同时渲染，如果使用data-src 或者之类的自定义属性，将会在js脚本执行时触发onload加载图片资源。也可以根据自己的场景自定义触发时间，比如如果想把较大的图片放到最后load，我们可以写在对应的地方，比如onload之类的事件里，根据自己的实际开发需求灵活配置。