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

Question

모바일 단말에서 이미지 목록을 표시하는 웹 페이지를 작성하기 위해 과거에는 jQuery의 지연 로딩 플러그인을 사용하여 이 기능을 구현했지만 이제는 jQuery 및 기타 플러그인을 사용할 수 없으며, 이 기능을 구현하려면 anglejs를 사용할 수 있습니다. 이미지의 경로는 json 번호를 읽어서 json에 저장됩니다.

仅有的幸福 · 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을 사용해야 합니다