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

我一直在使用boom的GUI,今天我想添加图像的延迟加载. GUI是使用AngularJS构建的.这是Gist,其工作版本可以加载所有图像：https://gist.github.com/brock/6724161

这是我的最新版本,添加了延迟加载：https://gist.github.com/brock/6746909
现在,它仅显示图像的占位符,但它们从未加载.

有趣的是,如果我打开Chrome控制台,则可以键入$(‘img.lazy’).lazyload(),它会按预期运行,但是我还不确定为什么这种情况永远不会发生在页面上加载.

解决方法:

这是因为在执行$(‘img.lazy’).lazyload()时(window.onload事件),AngularJS尚未将视图链接到您的模型,甚至还没有将其获取(获取.boom-&gt ; $scope.lists).

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

我添加了指令,请参见：http://plnkr.co/edit/eOXp9eQKIukCDNR90xje

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

标签：angularjs,lazy-loading,javascript,jquery
来源： https://codeday.me/bug/20191030/1967330.html