angular-masonry

angular-masonry copied to clipboard

Hello,

I'm using angular-masonry on a project and it works fine.

But since I have lots of images I wish to lazyload images using the jquery plugin which works but the images overlap each others because they don't have width and height set.

So I guess I need to relayout masonry after the images are loaded in the DOM. I use the following directive to lazyload the images:

.directive('lazyload', function($timeout) {
    return {
      restrict: 'A',
      link: function (scope, element) {
        $timeout(function() {
          angular.element(element).lazyload({
            effect: 'fadeIn',
            effectspeed: 500,
            'skip_invisible': false,
            failure_limit: Math.max(angular.element(element).length - 1, 0),
            threshold : 1000,
            load: function() {
                angular.element(element).trigger('scroll');
            }
          });
        }, 0);
      }
    };
  })

and apply it to the following HTML markup:

<div masonry preserve-order load-images="true" class="stream row ng-cloak" ng-controller="PhotosCtrl">
    <article class="photo masonry-brick" ng-repeat="photo in photosList">
        <a no-click href="#">
            <img lazyload ng-src="images/transparent.gif" data-original="{{photo.url}}" alt="{{photo.title}}">
        </a>
    </article>
</div>

Any suggestions would be greatly appreciated. Please keep in mind that I not an experienced coder.

Many thanks for your time and help.

@gablabelle did you solve this? I had the same issue. The problem was the images had no dimensions when the masonry plugin was loaded. My solution was to give the elements fixed dimensions even before the image is loaded. I think another solution could be having a "contentLoaded" event in the directive (as the imageLoaded one) that could be fired after the content is loaded and it is ready to be layouted.

Kinda disappointing as the Readme says the plugin use imagesloaded to preload them.

@grabbou it's long time ago, but did you include imagesLoaded.js lib?

Can't remember. Switched to my custom isotope binding with manual imagesloaded method and that did the trick perfectly :)

@gablabelle Hey gab, just wanted to thank you for your lazyload directive. Appreciate it, using it in my project.