Add delay while loading images

Ask the community
,
1

Hello,
Im trying to load images in groups of 10 from a dataset and having a delay between groups (display 10 images, then a delay, then another 10 images and so on in a loop).

I am trying to add a delay to my code but its not working. I have found that the setTimeout can be use to add a delay but it is not working as I need it.

Here is my code:
import wixData from ‘wix-data’ ;

var imagePos = 0 ;

$w . onReady ( function () {
wixData . query ( “image” )
. find () // Run the query
. then ( result => { // Set the table data to be the results of the query

for ( let i = 0 ; i < result.items.length ; i ++)
setTimeout ( function (){
console . log ( "i: " + i + " imagePos: " + imagePos );
$w ( “#image” + imagePos ). background.src = result.items[i ]. image ;

    **if** ( imagePos  ==  9 ){ 
        imagePos  =  0 ; 
    }  **else**  { 
        ++ imagePos ; 
    } 

},  5000 );

}

});

});

Is there a way to do this? Or maybe use a repeater to load them in groups?

Thanks in advance!