javascript - 将 jQuery LazyLoad 用于带有 AngularJS SPA 的图像网格

Question

我一直在玩 boom 的 GUI ，今天我想我会添加延迟加载图像。 GUI 是用 AngularJS 构建的。这是加载所有图像的工作版本的要点:https://gist.github.com/brock/6724161

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

有趣的是，如果我打开 Chrome 控制台，我只需键入 $('img.lazy').lazyload() 它就会按我预期的方式运行，但我没有尚未确定为什么这不会在页面加载时触发。

Answer 1

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

要使其成为 AngularJS 方式，您应该对任何 DOM 操作使用指令(即，使用操作 DOM 的 jQuery 插件)。

我添加了指令，看这个:http://plnkr.co/edit/eOXp9eQKIukCDNR90xje

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