packery+imagesLoaded not working reliably with Angular

[pliablepixels]

Hi there, I am evaluating packery + images loaded for my image gallery. Before I purchase packery, I wanted to make sure it works well for my solution.

The problem I am facing is that I am trying to show my image gallery (remote images) using packery with imagesLoaded. Sometimes when the view enters, it works and reflows.In that situation both my 'progress' and 'always' callbacks are called. However, sometimes when my view re-enters, it only calls 'always' and the images are all either vertically stacked in one column or underneath each other

However in that case when I drag, the images come out (but in one column). A video shows it best (note debug logs on the left - the code below explains the debug logs). The 2nd time i come to the view it messes up - but 3rd time is ok Video: (deleted)

I use a custom image src directive - I don't think that will cause issues ? My directive is here https://github.com/pliablepixels/zmNinja/blob/master/www/js/app.js#L375

My code to handle rendering (and fix this issue, which so far is unsuccessful)

function initPackery()
{

        var progressCalled = false;

        var elem =  angular.element(document.getElementById("mygrid"));
        pckry = new Packery('.grid', 
                             {
                                itemSelector: '.grid-item',
                                percentPosition: true,
                               columnWidth: '.grid-sizer',
                            });
         console.log ("**** mygrid is " + JSON.stringify(elem));

        imagesLoaded(elem).on('progress', function() {
                console.log ("******** SOME IMAGE LOADED");
                progressCalled = true;
                pckry.layout();
        });

        imagesLoaded(elem).on('always', function() {
                console.log ("******** ALL IMAGE LOADED");

                if (!progressCalled)
                {
                    // this is a hack - trying to figure out why this 
                    // problem is occuring - my hack does not work
                    console.log ("*** BUG SOMECALLED WAS NOT CALLED");
                    pckry.destroy();
                    pckry = new Packery('.grid', 
                             {
                                itemSelector: '.grid-item',
                                percentPosition: true,
                               columnWidth: '.grid-sizer',
                            });
                    pckry.layout();

                }

                pckry.getItemElements().forEach(function (itemElem) {
                      var draggie = new Draggabilly(itemElem);
                      pckry.bindDraggabillyEvents(draggie);
                       console.log ("**** MAPPED DRAG");
                     //  pckry.shiftLayout();
                });

        });

    }

[desandro]

Sorry to hear you're having trouble with Packery. Sounds like there are two issues that are happening

1. imagesLoaded doesn't always trigger in the same manner
2. Dragging causing problems

I would first make a simplified demo without images, so you can resolve the dragging issue.

If you're initializing Packery for the first time, use new Packery. If you're need to re-initialize packery after the DOM has changed, you may want to use reloadItems.

After you resolved the dragging issue, I'd then tackle the imageLoaded issue.

[pliablepixels]

Thanks - the problem seems to be related to angular and not packery, and how it handles loading DOM. I've fixed it (not related to packery)