如何解决加载gif静态资源慢？ | 论坛 - React Native中文社区
Your browser does not seem to support JavaScript. As a result, your viewing experience will be diminished, and you may not be able to execute some actions.
Please download a browser that supports JavaScript, or enable it if it's disabled (i.e. NoScript).
如何解决加载gif静态资源慢？
如何解决加载gif静态资源慢？
此主题已被删除。只有拥有主题管理权限的用户可以查看。
正在加载更多帖子
<span class="human-readable-number" title="
与 论坛 - React Native中文社区 的连接断开，我们正在尝试重连，请耐心等待在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
公司app有一个新的需求，就是启动图使用服务器获取的gif，播放完成后进入app。之前使用的是本地gif，所以会提前写好时长，达到这个时长后直接进入app，现在获取服务器传过来的gif，时长不固定。请问fresco有gif播放结束的回调吗？或者有办法使用fresco获取gif的时长吗？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
查看了fresco的文档，发现应该是不行的。文档如下：
Animatable animatable = mSimpleDraweeView.getController().getAnimatable();
if (animatable != null) {
animatable.start();
animatable.stop();
显然fresco是希望使用者自行判断结束播放的时间的。
可以让后台来获取gif的时长，然后再作为参数传给你
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。&>&fresco加载gif图片
fresco加载gif图片
上传大小：25.23MB
fresco加载gif图片
综合评分：0
{%username%}回复{%com_username%}{%time%}\
/*点击出现回复框*/
$(".respond_btn").on("click", function (e) {
$(this).parents(".rightLi").children(".respond_box").show();
e.stopPropagation();
$(".cancel_res").on("click", function (e) {
$(this).parents(".res_b").siblings(".res_area").val("");
$(this).parents(".respond_box").hide();
e.stopPropagation();
/*删除评论*/
$(".del_comment_c").on("click", function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_invalid/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parents(".conLi").remove();
alert(data.msg);
$(".res_btn").click(function (e) {
var parentWrap = $(this).parents(".respond_box"),
q = parentWrap.find(".form1").serializeArray(),
resStr = $.trim(parentWrap.find(".res_area_r").val());
console.log(q);
//var res_area_r = $.trim($(".res_area_r").val());
if (resStr == '') {
$(".res_text").css({color: "red"});
$.post("/index.php/comment/do_comment_reply/", q,
function (data) {
if (data.succ == 1) {
var $target,
evt = e || window.
$target = $(evt.target || evt.srcElement);
var $dd = $target.parents('dd');
var $wrapReply = $dd.find('.respond_box');
console.log($wrapReply);
//var mess = $(".res_area_r").val();
var mess = resS
var str = str.replace(/{%header%}/g, data.header)
.replace(/{%href%}/g, 'http://' + window.location.host + '/user/' + data.username)
.replace(/{%username%}/g, data.username)
.replace(/{%com_username%}/g, data.com_username)
.replace(/{%time%}/g, data.time)
.replace(/{%id%}/g, data.id)
.replace(/{%mess%}/g, mess);
$dd.after(str);
$(".respond_box").hide();
$(".res_area_r").val("");
$(".res_area").val("");
$wrapReply.hide();
alert(data.msg);
}, "json");
/*删除回复*/
$(".rightLi").on("click", '.del_comment_r', function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_comment_del/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parent().parent().parent().parent().parent().remove();
$(e.target).parents('.res_list').remove()
alert(data.msg);
//填充回复
function KeyP(v) {
var parentWrap = $(v).parents(".respond_box");
parentWrap.find(".res_area_r").val($.trim(parentWrap.find(".res_area").val()));
评论共有0条
VIP会员动态
CSDN下载频道资源及相关规则调整公告V11.10
下载频道用户反馈专区
下载频道积分规则调整V1710.18
spring mvc+mybatis+mysql+maven+bootstrap 整合实现增删查改简单实例.zip
资源所需积分/C币
当前拥有积分
当前拥有C币
输入下载码
为了良好体验，不建议使用迅雷下载
fresco加载gif图片
会员到期时间：
剩余下载个数：
剩余积分：0
为了良好体验，不建议使用迅雷下载
积分不足！
资源所需积分/C币
当前拥有积分
您可以选择
程序员的必选
绿色安全资源
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
您的积分不足，将扣除 10 C币
为了良好体验，不建议使用迅雷下载
无法举报自己的资源
你当前的下载分为234。
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可返还被扣除的积分
被举报人：
举报的资源分：
请选择类型
资源无法下载 （ 404页面、下载失败、资源本身问题）
资源无法使用 （文件损坏、内容缺失、题文不符）
侵犯版权资源 （侵犯公司或个人版权）
虚假资源 （恶意欺诈、刷分资源）
含色情、危害国家安全内容
含广告、木马病毒资源
*详细原因：
fresco加载gif图片Fresco加载gif不能显示问题解决
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的文档https://www.fresco-cn.org/docs/getting-started.html,文档中关于加载gif的描述如下：
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setUri(uri)
.setAutoPlayAnimations(true)
. // 其他设置(如果有的话)
mSimpleDraweeView.setController(controller);
这代码这么简单没什么问题啊。继续看文档，发现在问题处理中说可以启动日志，既然没有办法那就启动日志来看看呗。Fresco日志默认是关闭的，启动日志方法如下，在Fresco初始化时做如下配置：
Set requestListeners = new HashSet&&();
requestListeners.add(new RequestLoggingListener());
ImagePipelineConfig config = ImagePipelineConfig.newBuilder(context)
// other setters
.setRequestListeners(requestListeners)
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中的代码还是有点区别的，确认是依赖包冲突的问题了。
通过在 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 &#39;com.facebook.fresco:fresco:0.8.0&#39;
compile (&#39;com.facebook.react:react-native:0.29.2&#39;) {
exclude module:&#39;com.facebook.fresco:fresco&#39;
接下来我们就来看看为什么使用11版本的就少了那两个类呢?查阅各种资料，最终在一篇博客中发现了如下的内容：
一定要导入下边这个 compile &com.facebook.fresco:animated-gif:0.12.0&，否则gif图压根不动
于是瞬间懂了，原来高版本的fresco把gif相关的内容独立到了另一个依赖里面，这样如果不需要用到gif的项目就不需要导入，由于我们升级到了高版本，所以默认是没有gif相关的类的，所以就缺少了那两个类，导致gif不能显示，于是导入后，完美解决问题。
解决问题的方法有两种：
1.退回到低版本的fresco
2.使用高版本的，需要另外导入com.facebook.fresco:animated-gif这个依赖.cnblogs_code pre {
font-family: Courier New!
font-size: 15px!
word-wrap: break-
white-space: pre-
.cnblogs_code span {
font-family: Courier New!
font-size: 15px!
line-height: 1.5!
1、简介 Fresco是Facebook最新推出的一款用于Android应用中展示图片的强大图片库，可以从网络、本地存储和本地资源中加载图片。相对于ImageLoader，拥有更快的图片下载速度以及可以加载和显示gif图等诸多优势，是个很好的图片框架。
2、特点 1）内存管理
在5.0以下系统，Fresco将图片放到一个特别的内存区域。当然，在图片不显示的时候，占用的内存会自动被释放。这会使得APP更加流畅，减少因图片内存占用而引发的OOM。
内存分配采用：系统匿名共享内存 2）渐进式呈现图片
渐进式图片格式先呈现大致的图片轮廓，然后随着图片下载的继续， 呈现逐渐清晰的图片，这对于移动设备，尤其是慢网络有极大的利好，可带来更好的用户体验。 3）支持加载Gif图，支持WebP格式。 4）图像的呈现
（1）自定义居中焦点(对人脸等图片显示非常有帮助)。
（2）圆角图，当然圆圈也行。
（3）下载失败之后，点击重新下载。
（4）自定义占位图，自定义overlay, 或者进度条。
（5）指定用户按压时的overlay。 5）图像的加载
（1）为同一个图片指定不同的远程路径，或者使用已经存在本地缓存中的图片。
（2）先显示一个低解析度的图片，等高清图下载完之后再显示高清图。
（3）加载完成回调通知。
（4）对于本地图，如有EXIF缩略图，在大图加载完成之前，可先显示缩略图。
（5）缩放或者旋转图片。
（6）处理已下载的图片。
3、下载地址
官方使用网址：
4、支持的URI 远程图片
http://, https:// 本地文件
file:// Content provider
content:// asset目录下的资源
asset:// res目录下的资源
res:// Uri中指定图片数据
data:mime/base64,
5、常用API android:layout_width="20dp"// 不支持wrap_content， 如果要设置宽高比, 需要在Java代码中指定setAspectRatio(float ratio); android:layout_height="20dp" // 不支持wrap_content
fresco:placeholderImage="@color/wait_color"// 下载成功之前显示的图片 fresco:placeholderImageScaleType="fitCenter"// 设置图片缩放. 通常使用focusCrop,该属性值会通过算法把人头像放在中间 fresco:failureImage="@drawable/error"// 加载失败的时候显示的图片
fresco:failureImageScaleType=“centerInside"// 设置图片缩放 fresco:retryImage="@drawable/retrying"// 加载失败,提示用户点击重新加载的图片(会覆盖failureImage的图片) fresco:roundAsCircle="true"// 设置圆形方式显示图片 // 圆角设置
fresco:roundedCornerRadius="1dp"
fresco:roundTopLeft="true"
fresco:roundTopRight="false"
fresco:roundBottomLeft="false"
fresco:roundBottomRight="true"
fresco:roundWithOverlayColor="@color/corner_color"
fresco:roundingBorderWidth="2dp"
fresco:roundingBorderColor="@color/border_color"
6、使用步骤 （1）添加依赖
dependencies {
// 在 API & 14 上的机器支持 WebP 时，需要添加
compile 'com.facebook.fresco:animated-base-support:0.14.1'
// 支持 GIF 动图，需要添加
compile 'com.facebook.fresco:animated-gif:0.14.1'
// 支持 WebP （静态图+动图），需要添加
compile 'com.facebook.fresco:animated-webp:0.14.1'
compile 'com.facebook.fresco:webpsupport:0.14.1'
// 仅支持 WebP 静态图，需要添加
compile 'com.facebook.fresco:webpsupport:0.14.1'
compile 'com.facebook.fresco:fresco:0.14.1'
（2）在application中初始化Fresco
Fresco.initialize(this);
（3）配置网络权限
&uses-permission android:name="android.permission.INTERNET"/& （4）在xml布局文件中,加入命名空间
&!-- 其他元素--&
&LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
android:layout_height="match_parent"
android:layout_width="match_parent"&
（5）在xml中引入SimpleDraweeView
&com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/my_image_view"
android:layout_width="130dp"
android:layout_height="130dp"
fresco:placeholderImage="@drawable/my_drawable"
（6）在Java代码中开始加载图片
Uri uri = Uri.parse("https://raw.githubusercontent.com/facebook/fresco/gh-pages/static/logo.png");
SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.my_image_view);
draweeView.setImageURI(uri);
如果项目中使用了OkHttp需要进行替换
For OkHttp2:
compile "com.facebook.fresco:imagepipeline-okhttp:0.12.0+"
For OkHttp3:
compile "com.facebook.fresco:imagepipeline-okhttp3:0.12.0+"
7、例子 1）带进度条的图片 (先显示进度条，在显示图片)（1）布局
&?xml version="1.0" encoding="utf-8"?&
&LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_fresco_spimg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"&
&com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/sdv_fresco_spimg"
android:layout_width="130dp"
android:layout_gravity="center"
android:layout_height="130dp"
fresco:placeholderImage="@drawable/atguigu_logo" /&
&/LinearLayout&
@Bind(R.id.sdv_fresco_spimg)
SimpleDraweeView sdvFrescoS
private void initData() {
// 设置样式
GenericDraweeHierarchyBuilder builder = new GenericDraweeHierarchyBuilder(getResources());
GenericDraweeHierarchy hierarchy = builder.setProgressBarImage(new ProgressBarDrawable()).build();
sdvFrescoSpimg.setHierarchy(hierarchy);
// 加载图片的地址
Uri uri = Uri.parse("http://img4.duitang.com/uploads/item//30_ruKEK.jpeg");
// 加载图片
sdvFrescoSpimg.setImageURI(uri);
2）图片的不同裁剪
public class FrescoCropActivity extends Activity {
@Bind(R.id.sdv_fresco_crop)
SimpleDraweeView sdvFrescoC
private GenericDraweeHierarchyB
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fresco_crop);
ButterKnife.bind(this);
initData();
private void initData() {
builder = new GenericDraweeHierarchyBuilder(getResources());
// 居中，无缩放
@OnClick(R.id.bt_fresco_center)
void bt_fresco_center_click(View view){
// 样式设置
GenericDraweeHierarchy hierarchy = builder.setActualImageScaleType(ScalingUtils.ScaleType.CENTER).build();
// 图片显示
imageDisplay(hierarchy);
private void imageDisplay(GenericDraweeHierarchy hierarchy) {
sdvFrescoCrop.setHierarchy(hierarchy);
// 加载图片
Uri uri = Uri.parse("http://img4q.duitang.com/uploads/item//16_VrUUR.jpeg");
sdvFrescoCrop.setImageURI(uri);
// 保持宽高比缩小或放大，使得两边都大于或等于显示边界。居中显示
@OnClick(R.id.bt_fresco_centercrop)
void bt_fresco_centercrop_click(View view){
// 样式设置
GenericDraweeHierarchy hierarchy = builder.setActualImageScaleType(ScalingUtils.ScaleType.CENTER_CROP).build();
// 图片显示
imageDisplay(hierarchy);
// 同centerCrop, 但居中点不是中点，而是指定的某个点,这里我设置为图片的左上角那点
@OnClick(R.id.bt_fresco_focuscrop)
void bt_fresco_focuscrop_click(View view){
// 样式设置
PointF point = new PointF(0,0);
GenericDraweeHierarchy hierarchy = builder.setActualImageScaleType(ScalingUtils.ScaleType.FOCUS_CROP)
.setActualImageFocusPoint(point).build();
// 图片显示
imageDisplay(hierarchy);
// 使两边都在显示边界内，居中显示。如果图尺寸大于显示边界，则保持长宽比缩小图片
@OnClick(R.id.bt_fresco_centerinside)
void bt_fresco_centerinside_click(View view){
// 样式设置
GenericDraweeHierarchy hierarchy = builder.setActualImageScaleType(ScalingUtils.ScaleType.CENTER_INSIDE).build();
// 图片显示
imageDisplay(hierarchy);
// 保持宽高比，缩小或者放大，使得图片完全显示在显示边界内。居中显示
@OnClick(R.id.bt_fresco_fitcenter)
void bt_fresco_fitcenter_click(View view){
// 样式设置
GenericDraweeHierarchy hierarchy = builder.setActualImageScaleType(ScalingUtils.ScaleType.FIT_CENTER).build();
// 图片显示
imageDisplay(hierarchy);
// 保持宽高比，缩小或者放大，使得图片完全显示在显示边界内，不居中，和显示边界左上对齐
@OnClick(R.id.bt_fresco_fitstart)
void bt_fresco_fitstart_click(View view){
// 样式设置
GenericDraweeHierarchy hierarchy = builder.setActualImageScaleType(ScalingUtils.ScaleType.FIT_START).build();
// 图片显示
imageDisplay(hierarchy);
// 保持宽高比，缩小或者放大，使得图片完全显示在显示边界内，不居中，和显示边界右下对齐
@OnClick(R.id.bt_fresco_fitend)
void bt_fresco_fitend_click(View view){
// 样式设置
GenericDraweeHierarchy hierarchy = builder.setActualImageScaleType(ScalingUtils.ScaleType.FIT_END).build();
// 图片显示
imageDisplay(hierarchy);
// 不保持宽高比，填充满显示边界
@OnClick(R.id.bt_fresco_fitxy)
void bt_fresco_fitxy_click(View view){
// 样式设置
GenericDraweeHierarchy hierarchy = builder.setActualImageScaleType(ScalingUtils.ScaleType.FIT_XY).build();
// 图片显示
imageDisplay(hierarchy);
// 如要使用title mode显示, 需要设置为none
@OnClick(R.id.bt_fresco_none)
void bt_fresco_none_click(View view){
// 样式设置
GenericDraweeHierarchy hierarchy = builder.setActualImageScaleType(null).build();
// 图片显示
imageDisplay(hierarchy);
3）圆形和圆角图片
（1）设置圆形图片
（2）设置圆角图片
public class FrescoCircleAndCornerActivity extends Activity {
@Bind(R.id.sdv_fresco_circleandcorner)
SimpleDraweeView sdvFrescoC
private GenericDraweeHierarchyB
private RoundingP
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fresco_circle_and_corner);
ButterKnife.bind(this);
initData();
private void initData() {
uri = Uri.parse("http://img4q.duitang.com/uploads/item//38_wAfHC.jpeg");
builder = new GenericDraweeHierarchyBuilder(getResources());
// 设置圆形图片
@OnClick(R.id.bt_fresco_circle)
void bt_fresco_circle_click(View view){
parames = RoundingParams.asCircle();
GenericDraweeHierarchy hierarchy = builder.setRoundingParams(parames).build();
sdvFrescoCircleandcorner.setHierarchy(hierarchy);
sdvFrescoCircleandcorner.setImageURI(uri);
// 设置圆角图片
@OnClick(R.id.bt_fresco_corner)
void bt_fresco_corner_click(View view){
parames = RoundingParams.fromCornersRadius(50f);
parames.setOverlayColor(getResources().getColor(android.R.color.holo_red_light));//覆盖层
parames.setBorder(getResources().getColor(android.R.color.holo_blue_light), 5);//边框
GenericDraweeHierarchy hierarchy = builder.setRoundingParams(parames).build();
sdvFrescoCircleandcorner.setHierarchy(hierarchy);
// 加载图片
sdvFrescoCircleandcorner.setImageURI(uri);
4）渐进式展示图片(从不清晰到清晰)
// 加载质量配置
ProgressiveJpegConfig jpegConfig = new ProgressiveJpegConfig() {
public int getNextScanNumberToDecode(int scanNumber) {
return scanNumber + 2;
public QualityInfo getQualityInfo(int scanNumber) {
boolean isGoodEnough = (scanNumber &= 5);
return ImmutableQualityInfo.of(scanNumber, isGoodEnough, false);
ImagePipelineConfig.newBuilder(this).setProgressiveJpegConfig(jpegConfig).build();
// 获取图片URL
Uri uri = Uri.parse("http://cdn.duitang.com/uploads/item//53_45Qix.jpeg");
// 获取图片请求
ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri).setProgressiveRenderingEnabled(true).build();
DraweeController draweeController = Fresco.newDraweeControllerBuilder()
.setImageRequest(request)
.setTapToRetryEnabled(true)
.setOldController(sdvFrescoJpeg.getController())//使用oldController可以节省不必要的内存分配
// 1设置加载的控制
sdvFrescoJpeg.setController(draweeController);
5）Gif动画图片
（2）添加依赖
compile 'com.facebook.fresco:animated-gif:0.14.1'
@Bind(R.id.sdv_fresco_gif)
SimpleDraweeView sdvFrescoG
// 请求gif图片
@OnClick(R.id.bt_fresco_askImg)
void bt_fresco_askImg_click(View view){
Uri uri = Uri.parse("http://www.sznews.com/humor/attachement/gif/site3/7fcd7fcd.gif");
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setUri(uri)
.setAutoPlayAnimations(false)
.setOldController(sdvFrescoGif.getController())
sdvFrescoGif.setController(controller);
@OnClick(R.id.bt_fresco_stopAnim)
void bt_fresco_stopAnim_click(View view){
Animatable animatable = sdvFrescoGif.getController().getAnimatable();
if(animatable != null && animatable.isRunning()) {
animatable.stop();
// 动画开始
@OnClick(R.id.bt_fresco_startAnim)
void bt_fresco_startAnim_click(View view){
Animatable animatable = sdvFrescoGif.getController().getAnimatable();
if(animatable != null && !animatable.isRunning()) {
animatable.start();
6）多图请求及图片复用
// 先显示低分辨率的图，然后是高分辨率的图
@OnClick(R.id.bt_fresco_multiImg)
void bt_fresco_multiImg_click(View view){
// 图片地址
Uri lowUri = Uri.parse("http://img1.gamedog.cn//19--50.jpg");
Uri highUri = Uri.parse("http://img5.duitang.com/uploads/item//23_Y4y8F.jpeg");
// 控制加载图片
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setLowResImageRequest(ImageRequest.fromUri(lowUri))
.setImageRequest(ImageRequest.fromUri(highUri))
// 加载图片
sdvFrescoMulti.setController(controller);
// 本地缩略图预览
@OnClick(R.id.bt_fresco_thumbnailImg)
void bt_fresco_thumbnailImg_click(View view){
// 图片地址
Uri uri = Uri.fromFile(new File(Environment.getExternalStorageDirectory() +"/meinv1.jpg"));
// 加载图片的请求
ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)
.setLocalThumbnailPreviewsEnabled(true)
// 控制图片的加载
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setImageRequest(request)
// 加载图片
sdvFrescoMulti.setController(controller);
// 本地图片复用
@OnClick(R.id.bt_fresco_multiplexImg)
void bt_fresco_multiplexImg_click(View view){
//本地图片的复用
//在请求之前，还会去内存中请求一次图片，没有才会先去本地，最后去网络uri
//本地准备复用图片的uri
如果本地这个图片不存在，会自动去加载下一个uri
// 请求加载图片
Uri uri1 = Uri.fromFile(new File(Environment.getExternalStorageDirectory()+"/meinv.jpg"));
//图片的网络uri
Uri uri2 = Uri.parse("http://img5.duitang.com/uploads/item//23_Y4y8F.jpeg");
ImageRequest request1 = ImageRequest.fromUri(uri1);
ImageRequest request2 = ImageRequest.fromUri(uri2);
ImageRequest[] requests = {request1, request2};
// 控制加载图片
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setFirstAvailableImageRequests(requests)
.setOldController(sdvFrescoMulti.getController())
// 加载图片
sdvFrescoMulti.setController(controller);
7）图片加载监听
1 public class FrescoListenerActivity extends Activity {
@Bind(R.id.tv_title)
TextView tvT
@Bind(R.id.sdv_fresco_listener)
SimpleDraweeView sdvFrescoL
@Bind(R.id.tv_fresco_listener)
TextView tvFrescoL
@Bind(R.id.tv_fresco_listener2)
TextView tvFrescoListener2;
private ControllerListener controllerListener = new BaseControllerListener&ImageInfo&(){
// 加载图片完毕
public void onFinalImageSet(String id, ImageInfo imageInfo, Animatable animatable) {
super.onFinalImageSet(id, imageInfo, animatable);
if (imageInfo == null) {
// 获取图片的质量
QualityInfo qualityInfo = imageInfo.getQualityInfo();
tvFrescoListener.setText("Final image received! " +
"\nSize: " + imageInfo.getWidth()
+ "x" + imageInfo.getHeight()
+ "\nQuality level: " + qualityInfo.getQuality()
+ "\ngood enough: " + qualityInfo.isOfGoodEnoughQuality()
+ "\nfull quality: " + qualityInfo.isOfFullQuality());
// 渐进式加载图片回调
public void onIntermediateImageSet(String id, ImageInfo imageInfo) {
super.onIntermediateImageSet(id, imageInfo);
tvFrescoListener2.setText("IntermediateImageSet image receiced");
// 加载图片失败
public void onFailure(String id, Throwable throwable) {
super.onFailure(id, throwable);
tvFrescoListener.setText("Error loading" + id);
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fresco_listener);
ButterKnife.bind(this);
initData();
private void initData() {
tvTitle.setText("图片加载监听");
@OnClick(R.id.bt_fresco_listener)
void bt_fresco_listener(View view){
// 加载图片质量配置
ProgressiveJpegConfig jpegConfig = new ProgressiveJpegConfig() {
public int getNextScanNumberToDecode(int scanNumber) {
return scanNumber + 2;
public QualityInfo getQualityInfo(int scanNumber) {
boolean isGoodEnough = (scanNumber &= 5);
return ImmutableQualityInfo.of(scanNumber, isGoodEnough, false);
ImagePipelineConfig.newBuilder(this).setProgressiveJpegConfig(jpegConfig).build();
// 图片地址
Uri uri = Uri.parse("http://h.hiphotos.baidu.com/zhidao/pic/item/58ee3d6d55fbb2fbac4f2af24f4a20a44723dcee.jpg");
// 图片请求
ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)
.setProgressiveRenderingEnabled(true)
// 图片加载的控制
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setOldController(sdvFrescoListener.getController())
.setImageRequest(request)
.setControllerListener(controllerListener)
// 加载图片
<span style="color: #0
sdvFrescoListener.setController(controller);
<span style="color: #1
<span style="color: #2 }
FrescoListenerActivity
8）图片缩放和旋转
// 图片地址
Uri uri = Uri.parse("http://c.hiphotos.baidu.com/image/pic/item/962bd40735fae6cd21af.jpg");
// 图片的请求
ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)
.setResizeOptions(new ResizeOptions(50,50))
// 控制图片的加载
PipelineDraweeController controller = (PipelineDraweeController) Fresco.newDraweeControllerBuilder()
.setOldController(sdvFrescoResize.getController())
.setImageRequest(request)
// 加载图片
sdvFrescoResize.setController(controller);
Uri uri = Uri.parse("http://c.hiphotos.baidu.com/image/pic/item/962bd40735fae6cd21af.jpg");
ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)
.setAutoRotateEnabled(true)
// 控制图片的加载
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setOldController(sdvFrescoResize.getController())
.setImageRequest(request)
// 加载图片
sdvFrescoResize.setController(controller);
9）修改图片--为图片添加网格
// 图片地址
Uri uri = Uri.parse("http://c.hiphotos.baidu.com/image/pic/item/962bd40735fae6cd21af.jpg");
// 修改图片
Postprocessor postProcessor = new BasePostprocessor() {
public String getName() {
return "postProcessor";
public void process(Bitmap bitmap) {
//绘制红色点状网格
for (int x = 0; x & bitmap.getWidth(); x += 2) {
for (int y = 0; y & bitmap.getHeight(); y += 2) {
bitmap.setPixel(x, y, Color.RED);
// 创建图片请求
ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)
.setPostprocessor(postProcessor)
// 控制加载
PipelineDraweeController controller = (PipelineDraweeController)Fresco.newDraweeControllerBuilder()
.setOldController(sdvFrescoModify.getController())
.setImageRequest(request)
// 加载图片
sdvFrescoModify.setController(controller);
10）动态展示图片
&LinearLayout
android:id="@+id/ll_fresco"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:orientation="vertical"&
&/LinearLayout&
// 图片的地址
Uri uri = Uri.parse("http://img4q.duitang.com/uploads/item//38_wAfHC.jpeg");
// 图片的请求
ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)
// 加载图片的控制
PipelineDraweeController controller = (PipelineDraweeController) Fresco.newDraweeControllerBuilder()
.setOldController(simpleDraweeView.getController())
.setImageRequest(request)
// 加载图片
simpleDraweeView.setController(controller);
// 添加View到线性布局中
llFresco.addView(simpleDraweeView);
8、注意事项 1）问题处理
1）重复的边界
2）图片没有加载
3）文件不可用
4）OOM - 无法分配图片空间
5）Bitmap太大导致无法绘制
6）通过Logcat来判断原因
7）启动日志
8）查看日志
2）一些陷阱
1）不要使用 ScrollViews
2）不要向下转换
3）不要使用getTopLevelDrawable
4）不要复用 DraweeHierarchies
5）不要在多个DraweeHierarchy中使用同一个Drawable
6）不要直接控制 hierarchy
7）不要直接给 DraweeView 设置图片
8）使用 DraweeView 时，请不要使用任何 ImageView 的属性 3）为什么不支持wrap_content 4）共享元素动画
9、参考网站
阅读(...) 评论()}