react中的图片预加载

• 首先说明一点的是，如果你的项目中只需要几张提前预加载的图片可以进行使用，要是多的话，可能会导致你的项目卡顿，如果你使用了图片预加载，那么怎么验证呢，我们可以在network中查看有没有进行提前加载，还有将我们当前调试项目中的网络切换一下，变为2g等，在切换或者是点击事件让你的图片进行显示的时候，这个时候你可以在看看network中有没有重新加载请求图片，如果重新请求了，那么你的预加载就是有问题的，他是预加载了，但是你图片的路径可能不一致，只有没有在network中进行重新请求，那么说明你的图片预加载是正确的

• 下面先看看代码的实现

    // todo 预加载图片
  loadImage(url, callback) {     
    var img = new Image(); //创建一个Image对象，实现图片的预下载     
    img.onload = function(){
        img.onload = null;
        callback(img);
    }
    img.src = url; 
}

• 进行调用，这里我使用了componentDidMount生命周期

  componentDidMount() {
    //todo React.getImage('loading')这个是一样的，换肤的时候，里面的路劲是不同的
    this.loadImage(React.getImage('loading'),(img)=>{
      console.log(img);//这里可以不写或者是将上面方法中的回调函数去掉
    });
  }

• 解释下这个React.getImage('loading')；这是我写的全局的图片路径，要换肤切换图片，你们可以改成自己的图片路径就可以了

  
  
  image.png

• 上面的图片是初始化的时候，进行了图片预加载

image.png

• 这张图片是使用移动端的切换网络进行的调试一般是online，low-end mobile是低端手机的意思，网速也是很慢的