Skip to content

Appended and Prepended with ImagesLoaded #560

Open
@nasif-co

Description

@nasif-co

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions