Appended and Prepended with ImagesLoaded

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!

Start with the Packery API calls shown in the issue—appended, addItems, getItems, and layoutItems—and the imagesLoaded callback behavior. Reproduce the overlap and non-added-item cases using the supplied snippets; done means identifying a supported sequence that waits for image loading before visual insertion and handles both append and prepend.

Written by the indexing model from the issue text.