{"action":"created","issue":{"url":"https://api.github.com/repos/passy/angular-masonry/issues/62","labels_url":"https://api.github.com/repos/passy/angular-masonry/issues/62/labels{/name}","comments_url":"https://api.github.com/repos/passy/angular-masonry/issues/62/comments","events_url":"https://api.github.com/repos/passy/angular-masonry/issues/62/events","html_url":"https://github.com/passy/angular-masonry/issues/62","id":34375566,"number":62,"title":"Trying to use angular-masonry with the lazyload plugin to load images.","user":{"login":"gablabelle","id":1565793,"avatar_url":"https://avatars.githubusercontent.com/u/1565793?v=3","gravatar_id":"","url":"https://api.github.com/users/gablabelle","html_url":"https://github.com/gablabelle","followers_url":"https://api.github.com/users/gablabelle/followers","following_url":"https://api.github.com/users/gablabelle/following{/other_user}","gists_url":"https://api.github.com/users/gablabelle/gists{/gist_id}","starred_url":"https://api.github.com/users/gablabelle/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gablabelle/subscriptions","organizations_url":"https://api.github.com/users/gablabelle/orgs","repos_url":"https://api.github.com/users/gablabelle/repos","events_url":"https://api.github.com/users/gablabelle/events{/privacy}","received_events_url":"https://api.github.com/users/gablabelle/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2014-05-27T14:08:00Z","updated_at":"2015-04-21T19:47:41Z","closed_at":null,"body":"Hello,\r\n\r\nI'm using angular-masonry on a project and it works fine.\r\n\r\n![screen shot 2014-05-27 at 09 58 41](https://cloud.githubusercontent.com/assets/1565793/3092280/72daed52-e5a7-11e3-8e90-c0b7c7a2bbfa.png)\r\n\r\nBut 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.\r\n\r\n![screen shot 2014-05-27 at 09 58 24](https://cloud.githubusercontent.com/assets/1565793/3092284/7efda0d4-e5a7-11e3-86b2-c7f3cb3c1bbd.png)\r\n\r\nSo I guess I need to relayout masonry after the images are loaded in the DOM. I use the following directive to lazyload the images:\r\n\r\n```\r\n.directive('lazyload', function($timeout) {\r\n    return {\r\n      restrict: 'A',\r\n      link: function (scope, element) {\r\n        $timeout(function() {\r\n          angular.element(element).lazyload({\r\n            effect: 'fadeIn',\r\n            effectspeed: 500,\r\n            'skip_invisible': false,\r\n            failure_limit: Math.max(angular.element(element).length - 1, 0),\r\n            threshold : 1000,\r\n            load: function() {\r\n                angular.element(element).trigger('scroll');\r\n            }\r\n          });\r\n        }, 0);\r\n      }\r\n    };\r\n  })\r\n```\r\nand apply it to the following HTML markup:\r\n\r\n```\r\n<div masonry preserve-order load-images=\"true\" class=\"stream row ng-cloak\" ng-controller=\"PhotosCtrl\">\r\n    <article class=\"photo masonry-brick\" ng-repeat=\"photo in photosList\">\r\n        <a no-click href=\"#\">\r\n            <img lazyload ng-src=\"images/transparent.gif\" data-original=\"{{photo.url}}\" alt=\"{{photo.title}}\">\r\n        </a>\r\n    </article>\r\n</div>\r\n```\r\nAny suggestions would be greatly appreciated. Please keep in mind that I not an experienced coder.\r\n\r\nMany thanks for your time and help."},"comment":{"url":"https://api.github.com/repos/passy/angular-masonry/issues/comments/94917378","html_url":"https://github.com/passy/angular-masonry/issues/62#issuecomment-94917378","issue_url":"https://api.github.com/repos/passy/angular-masonry/issues/62","id":94917378,"user":{"login":"Hirbod","id":504909,"avatar_url":"https://avatars.githubusercontent.com/u/504909?v=3","gravatar_id":"","url":"https://api.github.com/users/Hirbod","html_url":"https://github.com/Hirbod","followers_url":"https://api.github.com/users/Hirbod/followers","following_url":"https://api.github.com/users/Hirbod/following{/other_user}","gists_url":"https://api.github.com/users/Hirbod/gists{/gist_id}","starred_url":"https://api.github.com/users/Hirbod/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Hirbod/subscriptions","organizations_url":"https://api.github.com/users/Hirbod/orgs","repos_url":"https://api.github.com/users/Hirbod/repos","events_url":"https://api.github.com/users/Hirbod/events{/privacy}","received_events_url":"https://api.github.com/users/Hirbod/received_events","type":"User","site_admin":false},"created_at":"2015-04-21T19:47:41Z","updated_at":"2015-04-21T19:47:41Z","body":"@grabbou it's long time ago, but did you include imagesLoaded.js lib?"}}