angular.js - angularjs如何实现图片延迟加载？

Question

写一个移动端显示图片列表的web，以往都是使用jQuery的延迟加载插件来实现这一功能的，但是现在要求不能使用jQuery以及其他插件，仅使用angularjs实现这个功能。图片的路径是存储在一个json中，通过读取json的数据ng-repeat出来的。
请问有什么好的解决方法？

仅有的幸福 · Answer

https://github.com/Treri/me-lazyload
https://github.com/Treri/me-lazyimg

두 기능은 비슷합니다. 전자는 문서에 스크롤용으로 배치되고 후자는 요소에서 스크롤되도록 설정할 수 있습니다.

我想大声告诉你 · Answer

생각:
1. 이미지 src의 실제 주소를 사용하지 마세요. 속성을 사용하여 요소에 저장하세요. 2. 로드해야 하는 모든 이미지를 배열에 넣습니다.
3. 초기화 중에 배열의 요소가 가시 범위 내에 있는지 확인하십시오. 가시 범위 내에 있으면 로드됩니다
4. 스크롤 이벤트를 창에 바인딩하여 이미지가 가시 범위 내에 있는지 확인하세요
5. 불러온 사진은 대기열에서 삭제됩니다

원본 링크: https://www.npmjs.com/package/angular-imglazyload

阿神 · Answer

jquery의 방법은 window.scroll을 모니터링한 다음 이미지의 위치와 src 속성을 전환해야 하는지 여부를 결정하는 것입니다. 각도의 경우에도 마찬가지이지만 각도는 명령에 DOM 작업을 작성해야 하기 때문에 필요합니다. 지침을 직접 구현하는 방법은 다음과 같습니다. ;

으아악 으아악

리스너가 하나만 있는 jquery와 같은 효율성을 원한다면 이lazyLoad의 논리는 IMG를 쿼리하는 방법을 고려해야 합니다
간단하고 문제를 덜고 싶다면 img 속성 수준에서 직접 명령을 작성하면 됩니다. 그러면 그림만큼 많은 이벤트 콜백이 등록됩니다

天蓬老师 · Answer

http://afklm.github.io/ng-lazy-image/ 많은 사람들이 이 모듈을 만들었고 이 링크는 보기에도 좋고 사용하기 매우 쉽습니다

淡淡烟草味 · Answer

로드를 지연하려면 $timeout을 사용해야 합니다

angular.js - angularjs如何实现图片延迟加载？

모든 응답(5)나는 대답할 것이다