美文网首页图片
Fresco加载gif不能显示问题解决

Fresco加载gif不能显示问题解决

作者: TeekTon | 来源:发表于2016-09-01 15:02 被阅读2149次

    1.Fresco引发的血案

    前面写过一篇关于Fresco分析的文章,没想到没过几天就发生了一场血案。事情是这样的,昨天另一个小哥跟我说他用Fresco加载gif不能显示了,他也不知道为什么,也没改什么东西,让我帮忙看一下。其实我们项目用Fresco已经挺久的了,然后之前那个地方也没有问题,但是不知道为什么就是不显示了。于是今天就开始了折腾。

    2.解决过程

    1.首先我怀疑是不是改了布局,导致控件没有显示出来。带着这样的怀疑,我设置了控件的背景为鲜明的红色,发现是显示出来的,并没有什么问题。当然这个想法可能太简单了点,但是这样的原因也是很有可能的,所以当一个控件不能显示的时候,你一定要先确定改控件是不是Visible,如果是Visible那么再去找其他原因。

    2.怀疑加载图片的URI有问题,通过跟踪AbstractDraweeController中的
    submitRequest()方向作为入口,不断跟踪到如下图的地方,发现URI正确,且正确调用的相应的方法。


    这里写图片描述

    既然url没有错,那我看看submit中的回调吧,如下图,妈蛋居然调的是失败,这我就懵逼了,这tm到底哪里出错了呢,就错了也不是咱自己的错吧,这锅不得facebook来背吗?但以我多年的职业经验来看这个事情不是那么简单,于是我继续断点反复查看。我们通过对Fresco的分析会发现,最终在处理请求时都会调用Producer类中的的produceResults来消费请求,但是对于这个Producer我也不是很懂,但是就凭他要调用的这个方法,我断点逐行分析,发现并没有什么问题。最终个条路也只能到这里结束。


    这里写图片描述

    3.实在没什么头绪了,于是去查看Fresco的文档http://www.fresco-cn.org/docs/getting-started.html,文档中关于加载gif的描述如下:

    Uri uri;
    DraweeController controller = Fresco.newDraweeControllerBuilder()
    .setUri(uri)
    .setAutoPlayAnimations(true)
    . // 其他设置(如果有的话)
    .build();
    mSimpleDraweeView.setController(controller);

    这代码这么简单没什么问题啊。继续看文档,发现在问题处理中说可以启动日志,既然没有办法那就启动日志来看看呗。Fresco日志默认是关闭的,启动日志方法如下,在Fresco初始化时做如下配置:

    Set<RequestListener> requestListeners = new HashSet<>();
    requestListeners.add(new RequestLoggingListener());
    ImagePipelineConfig config = ImagePipelineConfig.newBuilder(context)
    // other setters
    .setRequestListeners(requestListeners)
    .build();
    Fresco.initialize(context, config);
    FLog.setMinimumLoggingLevel(FLog.VERBOSE);

    查看日志方法如下:

    adb logcat -v threadtime | grep -iE 'LoggingListener|AbstractDraweeController|BufferedDiskCache'

    ok打开日志后,再次加载,看到如下日志:


    这里写图片描述

    什么意思呢?大概就是在DecodeProducer中有一个空指针异常,调用了decodeGif在一个空引用上。于是查看DecodeProducer类找到doDecode方法,发现其中调用了mImageDecoder.decodeImage,继续查看在decodeImage中调用到了我们要找的decodeGif方法,内容如下:


    这里写图片描述
    根据这个方法再打断点说的就是这个mAnimatedImageFactory是空指针,那么这个AnimatedImageFactory是个什么鬼,从源码我可以知道这个类就是用来解析动图的,目前可以解析gif和webP。 继续查看调用可以看到这个factory是在ImagePipeline中创建的,如下:
    这里写图片描述

    就是在这里通过AnimatedFactoryProvider创建了一个AnimatedFactory,里面代码如下:


    这里写图片描述
    通过反射来创建的,既然出现了空指针那就是这里创建的问题咯,那我们来看看这个两个类,发现根本找不到,所以问题就是这里咯。同时发现在项目中存在两个Fresco的包0.8.0和0.11.0,于是定位到可能是依赖冲突的原因。查看了0.8.0里面创建AnimatedFactory的代码发现与0.11.0中的代码还是有点区别的,确认是依赖包冲突的问题了。
    这里写图片描述

    通过在Android studio Terminal输入如下命令gradlew -q app:dependencies查看当前使用的依赖版本,发现虽然配置的是使用0.8.0但是实际使用的却是0.11.0。所以解决办法1就是恢复到0.8.0版本,至于11版本的为什么没有那两个类我们稍后再来看。

    +--- com.facebook.fresco:fresco:0.8.0 -> 0.11.0
    |    +--- com.facebook.fresco:drawee:0.11.0
    |    |    +--- com.android.support:support-v4:23.2.1 (*)
    |    |    \--- com.facebook.fresco:fbcore:0.11.0
    |    +--- com.facebook.fresco:fbcore:0.11.0
    |    \--- com.facebook.fresco:imagepipeline:0.11.0
    |         +--- com.android.support:support-v4:23.2.1 (*)
    |         +--- com.facebook.fresco:fbcore:0.11.0
    |         +--- com.parse.bolts:bolts-tasks:1.4.0
    |         +--- com.nineoldandroids:library:2.4.0
    |         \--- com.facebook.fresco:imagepipeline-base:0.11.0
    |              +--- com.android.support:support-v4:23.2.1 (*)
    |              +--- com.facebook.fresco:fbcore:0.11.0
    |              +--- com.parse.bolts:bolts-tasks:1.4.0
    |              \--- com.nineoldandroids:library:2.4.0
    
    +--- com.facebook.react:react-native:0.29.2
    |    +--- com.google.code.findbugs:jsr305:3.0.0
    |    +--- org.webkit:android-jsc:r174650
    |    +--- com.facebook.fresco:imagepipeline-okhttp3:0.11.0
    |    |    +--- com.facebook.fresco:fbcore:0.11.0
    |    |    +--- com.squareup.okhttp3:okhttp:3.0.1 -> 3.2.0
    |    |    |    \--- com.squareup.okio:okio:1.6.0 -> 1.8.0
    |    |    \--- com.facebook.fresco:imagepipeline:0.11.0 (*)
    |    +--- com.squareup.okio:okio:1.8.0
    |    +--- com.fasterxml.jackson.core:jackson-core:2.2.3
    |    +--- com.squareup.okhttp3:okhttp:3.2.0 (*)
    |    +--- com.facebook.fresco:fresco:0.11.0 (*)
    |    +--- com.squareup.okhttp3:okhttp-ws:3.2.0
    |    |    \--- com.squareup.okhttp3:okhttp:3.2.0 (*)
    |    +--- com.android.support:recyclerview-v7:23.0.1 (*)
    |    +--- com.squareup.okhttp3:okhttp-urlconnection:3.2.0
    |    |    \--- com.squareup.okhttp3:okhttp:3.2.0 (*)
    |    \--- com.android.support:appcompat-v7:23.0.1 (*)
    

    从上面的依赖关系可以看出我们自己依赖了fresco的0.8,同时依赖了react,但是react中依赖了fresco 0.11导致我们实际依赖的是搞版本的fresco,所以如果要使用低版本的,按理说只需要把react中的fresco排除,然后我们在导入自己需要的版本就行了,但是我按照这样的思路在build.gradle进行了如下配置,结果还是使用11版本的,最终没有找到原因,你们也可以试一下,如果有发现什么问题的一定要告诉我。

    compile 'com.facebook.fresco:fresco:0.8.0'
    compile ('com.facebook.react:react-native:0.29.2') {
       exclude module:'com.facebook.fresco:fresco'
    }
    

    接下来我们就来看看为什么使用11版本的就少了那两个类呢?查阅各种资料,最终在一篇博客中发现了如下的内容:

    一定要导入下边这个 compile 'com.facebook.fresco:animated-gif:0.12.0',否则gif图压根不动

    于是瞬间懂了,原来高版本的fresco把gif相关的内容独立到了另一个依赖里面,这样如果不需要用到gif的项目就不需要导入,由于我们升级到了高版本,所以默认是没有gif相关的类的,所以就缺少了那两个类,导致gif不能显示,于是导入后,完美解决问题。

    3.总结

    解决问题的方法有两种:
    1.退回到低版本的fresco
    2.使用高版本的,需要另外导入com.facebook.fresco:animated-gif这个依赖

    参考资料
    gradle 管理依赖库两个问题
    fesco加载gif类似问题

    相关文章

      网友评论

      • Ivy_study:大神你好,我加入了com.facebook.fresco:animated-gif这个依赖,运行就出错了,怎么破:persevere:
        TeekTon:@Ivy_study :joy: 太久没上简书了
        Ivy_study:现在解决了 是com.facebook.fresco:animated-gif版本号问题,谢谢回复
        TeekTon:看看你什么错
      • eveo::smile: 楼主,不知道你对fresco加载gif容易oom有没有好的解决方案呢
        筱龙缘:@eveo 请问解决了么 我这边也遇到了这个问题
        eveo:@TeekTon 多个超过10m的gif,似乎fresco并没有进行压缩,虽然加载这么大的gif本身有问题,但是还是想找出解决的方案
        TeekTon:我也用来加载gif啊,难道是你的图片太大。fresco对内存这块有处理的啊,不应该啊。

      本文标题:Fresco加载gif不能显示问题解决

      本文链接:https://www.haomeiwen.com/subject/yyocettx.html