前言

使用recyclerView时遇到了图片错位的问题，这个问题网上已经讨论的很成熟，谨以此文章做个总结。

问题产生原因

根本原因： 因为有ViewHolder的重用机制，每一个item在移出屏幕后，都会被重新使用以节省资源，避免滑动卡顿。

问题现象：就是每个item或者item数量多了以后，滑动太快时会出现图片错位。

解决方案

一、设置占位图

1、直接在链式请求中加`.placeholder()`：

Glide.with(this).load(picUrl).placeholder(R.drawable.ic_loading).into(holder.ivThumb)

2、添加监听，在回调方法中设置：

Glide.with(mContext).load(picUrl).error(R.drawable.ic_loading).into(new SimpleTarget<GlideDrawable>() {@Overridepublic void onResourceReady(GlideDrawable glideDrawable, GlideAnimation<? super  GlideDrawable> glideAnimation) {holder.ivThumb.setImageDrawable(glideDrawable);}@Overridepublic void onStart() {super.onStart();holder.ivThumb.setImageResource(R.drawable.ic_loading);}});

二、设置TAG

使用setTag（）方式。但是，Glide图片加载也是使用这个方法，所以需要使用setTag（key，value）方式进行设置，这种方式是不错的一种解决方式，注意取值的时候应该是getTag（key）这个方法，当异步请求回来的时候对比下tag是否一样，再判断是否显示图片,我使用的是position设置tag.

时间及事件梳理

代码

 @Overridepublic void onBindViewHolder(final VideoViewHolder holder, final int position) {holder.thumbView.setTag(R.id.tag_dynamic_list_thumb, position);Glide.with(mContext).load(picUrl).error(R.drawable.video_thumb_loading).into(new SimpleTarget<GlideDrawable>() {@Overridepublic void onResourceReady(GlideDrawable glideDrawable, GlideAnimation<? super GlideDrawable> glideAnimation {if (position != (Integer) holder.thumbView.getTag(R.id.tag_dynamic_list_thumb))return;holder.thumbView.setImageDrawable(glideDrawable);}@Overridepublic void onStart() {super.onStart();holder.thumbView.setImageResource(R.drawable.ic_loading);}});}

三、在onViewRecycled方法中重置item的ImageView并取消网络请求

流程：在onBindViewHolder中发起加载请求，然后在view被回收时取消网络请求

@Override
public void onBindViewHolder(VideoViewHolder holder, int position) {String istrurl = mImgList.get(position).getImageUrl();if (null == holder || null == istrurl || istrurl.equals("")) {return;}Glide.with(mContext).load(picUrl).placeholder(R.drawable.ic_loading).into(holder.thumbView);
}@Override
public void onViewRecycled(VideoViewHolder holder) {if (holder != null) {Glide.clear(holder.thumbView);holder.thumbView.setImageResource(R.drawable.ic_loading);}super.onViewRecycled(holder);
}

致谢

https://blog.csdn.net/u013183608/article/details/89296915

https://blog.csdn.net/u010126792/article/details/84374729

RecycleView中使用Glide加载图片防止加载错乱相关推荐

html图片懒加载,图片懒加载原理及实现
原理: 先将img标签的src链接设为同一张图片(比如空白图片),然后给img标签设置自定义属性(比如 data-src),然后将真正的图片地址存储在data-src中,当JS监听到该图片元素进入可视 ...
在html中加入一个动态图,图片上加gif图片图片某个角落贴个gif动态图，如何在静态图片上面加一张GIF动态图...
喜欢上网的小伙伴就会知道网上流传灰常广泛一种搞笑gif动态图片,这类图片大部分是视频转gif的,就是截取视频经典搞笑画面制作而成,还加了些搞笑文字.使用网络聊天工具尤其是QQ就最常见了,那些搞笑的表情 ...
html和css的图片怎么加,css图片怎么加链接？
css可以通过在图片前加标签实现为图片加链接,语法:.使用此方法引入图片即可为图片添加链接. 设定图片超链接,用css样式来实现,其实就是给这个图片的块添加超链接,我们可以通过在这个块的前面添加一个a ...
Android渐进式加载图片,渐进式加载 - 基础讲解
前言: 我们在PC端用浏览器看图片的时候,经常是先看到一张模糊图,然后再渐渐的变得清晰,这种情况在看漫画的时候尤其常见(模糊图如下),这种效果就叫做渐进式加载.渐进式加载能够大大的提升体验感,我们先来 ...
php怎么在图像中显示文字,怎么在图片上面加文字人物图片中加文字或特效
这是一个拍照和自拍的年代,照片处理也就成为后期常做的事了.很多人都会先把照片处理得美美的,再传网上晒照.你知道如何在人物图片上添加闪烁的文字做成GIF动态图片么?常有在人物图片加动态说明文字或特效以渲 ...
js 加载图片无法加载成功，提示：net::ERR_BLOCKED_BY_CLIENT
1.浏览器有禁止广告的插件,关掉就可以了. 2.插件图片命名是否带有广告,ad,等词,如果有,删掉就可以.
使用selenium设置firefox不加载图片增加加载速度提高爬虫效率
from selenium import webdriver options=webdriver.FirefoxProfile() options.set_preference('permission ...
el-image加载图片初始化加载失败问题
// file.url = URL.createObjectURL(res.data); // 使用this.$set()添加属性,解决初始化el-image的src获取不到url的问题this.$s ...
Glide加载图片完成的回调
用于加载完成图片后进行的整理操作,比如在listview中或者RecycleView中使用Glide加载完图片后图片不能自己显示完全,要手动上划才能显示完全,这是因为图片加载是异步的,在图片渲染完成之 ...

RecycleView中使用Glide加载图片防止加载错乱

前言

问题产生原因

解决方案

一、设置占位图

1、直接在链式请求中加`.placeholder()`：

2、添加监听，在回调方法中设置：

二、设置TAG

时间及事件梳理

代码

三、在onViewRecycled方法中重置item的ImageView并取消网络请求

流程：在onBindViewHolder中发起加载请求，然后在view被回收时取消网络请求

致谢

RecycleView中使用Glide加载图片防止加载错乱相关推荐

最新文章

热门文章