如何解决加载gif静态资源慢?



  • 我需要做一个加载提示框效果如下:
    预期效果
    加载提示中间使用的是一个gif静态资源,资源大小75KB,但是由于Image组件加载gif资源慢,会导致先出现加载提示框,后出现图片的问题,BUG效果如下:
    实际效果图
    而且我这个弹出框组件是写在首页的render方法里的,但是每次弹出都会重新加载一遍gif图,所以每次都会有这种情况出现,虽然显示间隔时间很短,但是还是可以明显的看出闪烁的问题。
    谁有什么好的解决办法么?



  • 我尝试过把gif按帧分解成图片然后每0.1秒显示一张,这样的话延时是没了,但是会时不时的卡顿,就是经常会一卡一卡的,卡顿时间有长有短。



  • 都没办法么……求助……



  • 我是直接上来就渲染出gif,通过position部署在页面外面,需要显示的时候改变style回到正确的位置,可以解决这个问题,但是对于性能可能会有一丢丢影响,我感觉也可以在需要的时候先加载图片,并监听图片资源加载结束的回调函数onLoad触发的时候再在页面上显示modal。或者使用prefetch先把图片加载到本地。后两者我还没用过



  • 项目目录的 android/app/build.gradle里

    dependencies {
    .....
    compile 'com.facebook.fresco:animated-gif:1.0.1'
    }



  • @FlyingMonkeyKing 我的gif图是在本地的所以不存在先使用prefetch加载图片到本地的问题,监听图片资源加载结束的回调函数onLoad事件同样会产生延时,只不过延时变成了modal弹出反应迟钝而不是原来的先出modal框后出gif,第一个方法倒是可以考虑下,但是对modal并不好用,我需要modal是因为我需要一个全屏的30%黑色遮罩,如果使用modal的话可以做遮罩但是无法 先部署在页面外面,因为modal每次弹出都render一遍



  • @cx5168 我的问题是 加载gif慢产生了延时,并不是加载不了。。。



  • 我是用这种结构来做的,感觉挺流畅的。你试试?
    render(){
    if(this.state.isloading){
    return <Splash />
    }
    return(
    <View>.......
    );
    }



  • @cx5168 木有区别。。。



  • This post is deleted!


  • 这个时候你需要一个东西 SVG


Log in to reply