使用jQuery LazyLoad与AngularJS SPA的图像网格

Question

我一直在玩一个用于繁荣的GUI，今天我想我会添加Lazy Loading of images。 GUI使用AngularJS构建。 这是带有加载所有图像的工作版本的Gist： https ： //gist.github.com/brock/6724161

这是我的最新版本添加延迟加载： https ：//gist.github.com/brock/6746909现在它只显示图像的占位符，但它们永远不会加载。

有趣的是，如果我打开Chrome控制台，我可以输入$('img.lazy').lazyload()并按照我的预期运行，但我还没有确定为什么这不会触发在页面加载。

Answer 1

那是因为在执行$('img.lazy').lazyload() （window.onload事件），AngularJS没有将视图链接到你的模型，甚至还没有获取它（获取.boom - > $ scope.lists）。

要使它成为AngularJS方式，您应该使用指令进行任何DOM操作（即使用操纵DOM的jQuery插件）。

我添加了指令，请看： http ： //plnkr.co/edit/eOXp9eQKIukCDNR90xje

我在$ timeout内执行lazyload（）函数，因为img DOM元素上的属性必须先插入（{{url}}填充）才能使lazyload（）正常工作。