Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Developer
sketch34
Posts: 54
Registered: ‎05-23-2012
My Device: Developer
Accepted Solution

How to detect when ListView recycles an ImageView?

[ Edited ]

I've got a ListView with ~600 items in a 4-wide grid. Each item is a WebImageView (inherits from ImageView, modified slightly from the code kindly provided here) above a Label.

 

Everything works spot-on (and performance is awesome) except for one glaring issue: when I scroll the ListView the ImageView sometimes momentarily displays the wrong image from an item that was previously scrolled out. Sometimes it even flicks between two prior images before displaying the correct one. These issues are occuring because the WebImageView network requests are queueing up because the visible item has been recycled once or even twice.

 

All I need to fix this is to know when the WebImageView has been recycled by the ListView so I can disconnect from the network signals and properly clear the old image. I just can't seem to find how to do this.

----
I know exactly where the problem *might* be.
Developer
sketch34
Posts: 54
Registered: ‎05-23-2012
My Device: Developer

Re: How to detect when ListView recycles an ImageView?

[ Edited ]

So I've got a "fix" which is more of a workaround. In the WebImageView I added a member variable:

 

int m_iCurrentRequestIndex;

 

Each time WebImageView does a network request, I add m_iCurrentRequestIndex as an attribute on the QNetworkRequest and then increment it.

 

When I get the network reply, I check the attraibute value e.g. a_reply->request().attribute(...) and discard the reply if it isn't the latest one.

 

Not a very good solution since it is still allowing useless network requrests to proceed and just discarding the results, but at least it is working. But if someone can answer the question in the original post, I'll mark that as the solution since it will allow for better efficiency. i.e. I want a signal or something available to WebImageView that is called when the ListView recycles it like:

 

WebImageView::onRecycled()
{
    // close() and disconnect() current QNetworkRequest().
}

 

----
I know exactly where the problem *might* be.
Developer
Brennan12325
Posts: 205
Registered: ‎05-15-2012
My Device: None

Re: How to detect when ListView recycles an ImageView?

[ Edited ]

I had a similar issue. I assume you extended CustomControl for your ListView item?

 

I more or less hacked around it to. I maintain the image name/url as a member variable, then in my SLOT I check if it's the correct image for the item. If it isn't I do nothing. This should always work, I guess. Even if two of your images are loaded from the exact same URL, the only side effect is the same image might load twice.

 

Everytime the update item is called I reset whatever image was in the visual node to a "loading" image, so the cell is never shown with the wrong image in it.

 

EDIT: I didn't notice you were using a webimageview. I am not familiar with the class and haven't used it, but I'd imagine it's the same principle.

----------------------
Check out my app, Alien Flow for reddit

And of course, like my post if you found it helpful or informative!
Developer
Hithredin
Posts: 405
Registered: ‎06-03-2010
My Device: Z10 Red

Re: How to detect when ListView recycles an ImageView?

You can detect a recycling with this line on code to put inside your List cell:

 

ListItem.onDataChanged: {

 

}

Contributor
candll
Posts: 19
Registered: ‎05-09-2013
My Device: Z10

Re: How to detect when ListView recycles an ImageView?

[ Edited ]

I stumbled upon the same problem. My WebImageView is also based on RileyGB's WebImageViewSample

My WebImageView code: http://pastebin.com/SS14cT23.

(Notable changes include progress reporting and caching to memory instead of writing to the filesystem).

 

I needed to download Images inside a ListView and show progress while they are getting downloaded:

 

//code below is inside a ListView's ListItemComponent {}
Container { horizontalAlignment: HorizontalAlignment.Fill verticalAlignment: VerticalAlignment.Fill ListItem.onDataChanged: { //TODO this line is supposed to detect ListView recycling cells } layout: DockLayout {} ProgressIndicator { id: progress horizontalAlignment: HorizontalAlignment.Center verticalAlignment: VerticalAlignment.Center } WebImageView { id: image url: ListItemData.url scalingMethod: ScalingMethod.AspectFit horizontalAlignment: HorizontalAlignment.Center verticalAlignment: VerticalAlignment.Center onProgressChanged: { progress.value = image.progress } onImageLoaded: { progress.visible = false } onImageFailed: { progress.visible = false; //TODO set image.imageSource to an image indicating error } onDownloadFailed: { progress.visible = false; //TODO set image.imageSource to an image indicating error } } }

 Not only do I get sometimes duplicate images inside the Listview, it also messes up the progress bar. Unfortunately from the tips you have provided in the thread I was not able to fix my implementation and I would greatly appreciate help..

Contributor
jhitchcock
Posts: 14
Registered: ‎06-01-2011
My Device: BlackBerry Q10

Re: How to detect when ListView recycles an ImageView?

Sorry to revive an old thread.. but AFAIK this is still a big issue.. Did you ever get it resolved?