angular.js-Angularjs에서 이미지의 지연 로딩을 구현하는 방법은 무엇입니까?

Question

이 기능을 구현하기 위해 과거에는 jQuery의 지연 로딩 플러그인을 사용하여 모바일 단말기에 이미지 목록을 표시하는 웹 페이지를 작성했지만 이제는 jQuery 및 기타 플러그인을 사용할 수 없습니다. , 이 기능을 구현하는 데는angularjs만 사용됩니다. 이미지의 경로는 json에 저장되며 ng-repeat json 데이터를 읽어서 얻습니다.
좋은 해결책이 있나요?

Answer 1

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

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

Answer 2

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

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

Answer 3

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

으아악 으아악

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

Answer 4

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

Answer 5

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