qml listview image caching doesn't work as expected - image

Question

I created an list view with images which automatically requests new items when scrolled down. I am using Image component to show the image from url source. the problem is that the images are not cached in memory once they are loaded. I can see them when I scroll down but when I go back up I have to wait for them to be loaded again. Is there a way to fix this? Image component has a property cache but it doesn't do any improvement. I know that in Android this is done in exactly the same way and the images are persisted in memory once downloaded.
here is a sample code:
ApplicationWindow {
visible: true
width: 800
height: 600
id: rootId
property url fullImageUrl
property string tag : "windsurfing"
XmlListModel{
id : modelId
namespaceDeclarations: "declare namespace media = 'http://search.yahoo.com/mrss/';"
source: "http://api.flickr.com/services/feeds/photos_public.gne?format=rss2&tags="+tag
query: "//item[title and media:thumbnail and media:content]"
XmlRole{name:"fullImage"; query:"media:content/#url/string()" }
}
TextField{
id : userValueId
font.pointSize: 14
width: parent.width
height : implicitHeight
placeholderText: "Enter a Flickr Tag"
onEditingFinished: tag = text
}
ListView{
id : listViewId
anchors.fill: parent
anchors.topMargin: userValueId.height + 10
Layout.minimumWidth: 400
Layout.maximumWidth: parent.width - 50
model: modelId
delegate: delegateId
}
Component{
id: delegateId
Rectangle{
id :itemId
height : 300
width : 500
Image{
id : imageId
source : fullImage
anchors.fill: parent
fillMode: Image.Stretch
cache: true
}
}
}
}

Answer 1

How can I cache the graphic items supplied by the model and drawn in
QML ListView?
I would try to use ListView cacheBuffer property which is specified in pixels to fit delegates. If your delegate is of 300 pixels in the scroll direction (say, height and you scroll vertically) then having one delegate per row and 10000 pixels for the "cache buffer" it fits up to 33 delegates then.
ListView {
id : listViewId
anchors.fill: parent
anchors.topMargin: userValueId.height + 10
cacheBuffer: 10000 // pixels in direction of scrolling the view,
// saves a bit of processing just by caching
// delegates content in memory, causes async
// read-ahead for images outside of view area
Layout.minimumWidth: 400
Layout.maximumWidth: parent.width - 50
model: modelId
delegate: delegateId
}
If the amount of memory strictly limited it makes sense to specify reasonably small cacheBuffer e.g. 2 pages of list view to prevent too much read-ahead. The cache is not a guarantee that the data won't be read again. I also had some doubts if using Component is the right way to go with image caching but concluded it should not affect things as long as there is no Loader in the code for that Component that does the load at arbitrary times.
And you can also try to implement own image provider in C++ to explicitly control the image download / caching so the logic will be fully controlled by your code.