Description
Not really a bug but rather asking for the correct way to do something in particular: In certain moments I'm trying to append/prepend items to my packery grid. However, I'd like to first load all the images in those items and once that is done, append/prepend them visually to the grid. I tried this:
$grid.append(items);
$grid.imagesLoaded( function() {
$grid.packery('appended', items);
});
Because I thought the first line $grid.append(items)
did not trigger any visual changes, but apparently it does; there is a brief moment in which the new items overlap with the others. I suspect this happens in the time between the first line running and the layout triggered by imagesLoaded taking place.
Then, I attempted to use the 'addItems'
method first and then run 'layoutItems'
but now it seems the items are not being added at all:
//newItems is a jQuery object that works as expected using $grid.packery('appended', items); but not here.
$grid.packery('addItems', newItems);
let addedItems = $grid.packery( 'getItems', newItems );
$grid.imagesLoaded( function() {
$grid.packery('layoutItems', addedItems, false);
});
}
Also if I managed to get this method to work, it would only append the items, I can't see how I could use it to prepend them.
Any suggestions are greatly appreciated!