@t3685
Hi,
yes, indeed. This was the problem.
I solved ot now by creating an item, which contains a grid of "only" 36 (i.e. 6x6) elements inside the Flickable.
Item {
id: imageItem
GridLayout {
id: localGrid
columns: 6
rows: 6
rowSpacing: 0
columnSpacing: 0
Repeater {
model: tile1000model
Image {
transformOrigin: Item.Left
asynchronous: true
sourceSize.height: 1024
sourceSize.width: 1024
source: modelData
}
}
}
}
This grid is then dynamically moved over the Flickable-area, depending on the contentX and contentY changes:
onContentXChanged: updateImages(contentX, contentY)
onContentYChanged: updateImages(contentX, contentY)
function updateImages(x, y) {
var _x = Math.floor(x / 1024)
var _y = Math.floor(y / 1024)
if (_x < 0) {
_x = 0
}
if (_y < 0) {
_y = 0
}
var _x2 = _x
var _y2 = _y
if (_x >= 2) { // not at left border
_x2 -= 2
}
if (_y >= 2) { // not at top
_y2 -= 2
}
console.log("_x", _x, "prevX", prevX, "_y", _y, "prevY", prevY)
if (Math.abs(prevX - _x) > 1 || Math.abs(prevY - _y) > 1) {
imageItem.y = _y2 * 1024
imageItem.x = _x2 * 1024
for (var i = 0; i < localGrid.children.length; ++i) {
var ix = i % 6 + _x2
var iy = Math.floor(i / 6) + _y2
if (localGrid.children[i].source)
localGrid.children[i].source = "qrc:/slices/tile1000_" + iy + "_" + ix + ".png"
}
prevX = _x
prevY = _y
}
}
This works fine, but when scrolling from right to left, or from bottom to top, some flickering happens, because the loading takes too much time.
Well, thank you for your help.
