QML: Load images in GridView - image

Question

I am a QML beginner ans want to load some pictures in my application. With a FileDialog I choose the folder containing around 1000 images.
Then, I want to load them in a GridView. A SwipeView helps to split the images to 40 images/screen. So the SwipeView has 25 pages.
Now how can I load the images without waiting 1 hour until they are load?
Here is my code:
import QtQuick 2.6
import QtQuick.Controls 2.1
import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1
import Qt.labs.folderlistmodel 1.0
import QtQuick.Controls 1.4
import QtQuick.Controls 2.1
import QtQuick.Dialogs 1.1
import QtQml.Models 2.1
Window{
visible: true
width: 1000
height: 600
FolderListModel{
id: lm
showDirs: false
}
FileDialog {
id: fileDialog
selectFolder: true
title: "Please choose a folder"
folder: shortcuts.home
onAccepted: {
lm.folder = fileUrl+"/"
}
onRejected: {
console.log("Canceled")
Qt.quit()
}
Component.onCompleted: visible = true
}
SwipeView {
width: 800
height: 500
clip: true
currentIndex: 0
Repeater {
model: Math.ceil(lm.count / 40)
delegate: gridView
}
}
Component{
id: gridView
GridView{
interactive: false
width: 800
height: 500
property int viewIndex: index
model: DelegateModel {
model: lm
groups: DelegateModelGroup { name: 'filter' }
Component.onCompleted: {
for (var i = viewIndex * 40; i < lm.count && i < (viewIndex * 40) + 40; i++) {
items.setGroups(i, 1, ['items', 'filter'])
}
}
filterOnGroup: 'filter'
delegate: Image {
width: 80
height: 120
source: lm.folder+fileName
asynchronous: true
}
}
}
}
}
If anyone can help me, I would be happy.
Thanks and regards,
Eddie

Answer 1

The problem is that you are loading all the 1000 images, not only for the current page.
As a quick solution, I would suggest you to define a filterOnGroup as 'filter' only if it is GridView on the current page, like:
// note: `swipeViewId` is an id of the SwipeView
filterOnGroup: swipeViewId.currentIndex == index ? 'filter' : ''
Another way is to use Loader as a delegate for SwipeView and set its sourceComponent to gridView if it is current or to null otherwise.
Repeater {
model: Math.ceil(lm.count / 40)
delegate: Loader {
sourceComponent: SwipeView.isCurrentItem ? gridView : null
onLoaded: {
item.viewIndex = index
}
}
}
Also, you may play with sourceSize property of the Image if the actual images are larger then its preview (80x120 in your example)