前端图片加载优化 | 青训营笔记最近在使用react做项目的时候，发现图片加载是会从上往下加载，在路由切换时图片频繁加载

最近在使用react做项目的时候，发现图片加载是会从上往下加载，在路由切换时图片频繁加载，在网速快的时候还好，但是网速差的时候体验非常差。

react没有封装像vue一样的路由活跃组件，但是使用活跃路由仍然无法解决首次加载图片加载问题

解决办法
1、先将图片隐藏起来，可以使用display:none或者opacity: 0，又或者visibility: hidden，我在这里是用的opacity: 0，主要是因为我想做一个渐显的动画。当图片隐藏时可以做一个Loading或者展位dom元素，当然你可以在父元素中使用padding-bottom: 56.3%;来为图片元素占位，这样就不需要在加占位dom元素了，padding-bottom给的百分比值为图片的比例。效果优化用户体验将控制Loading的值设为true

2、将img标签绑定一个onLoad事件，当图片加载完成后会触发这个事件，这个时候把图片显示出来opacity: 1，然后把Loading效果隐藏将控制Loading的值show设为false

3、不推荐使用js直接操控style样式，因为这样使用的是行内样式，他的优先级是最高的，但是也会导致在html中增加一大串css代码，不美观的同时可能会导致不可控的问题。可以通过操纵class样式选择器改变样式

4、当然我在开头便说过react没有封装像vue一样的路由活跃组件，虽然上面解决了图片加载体验的问题，但是在每次路由切换时，图片都需要重新加载，体验也会变差，所以，可以自己封装一个类似像vue一样的路由活跃组件

图片加载优化具体代码如下
html

<img className='banner-img-hide' src={imageObj.url} alt="banner" onLoad={awaitImg} />

css

#home .slideshow img{  
  position: absolute;  
  width: 100%;  
  transition: opacity 0.1s;  
}  

.banner-img-hide{  
  opacity: 0;  
}  
  
.banner-img-show{  
  opacity: 1;  
}

  function awaitImg(e){  
    e.target.className='banner-img-show'  
  }