JS를 기반으로 이미지 지연 로딩을 구현하는 예제 튜토리얼

이미지 지연 로딩도 비교적 일반적인 성능 최적화 방법입니다. 이 글에서는 기본 JS를 사용한 이미지 지연 로딩의 예를 주로 소개합니다. 필요한 친구들은 이를 참고할 수 있습니다.

이미지의 지연 로딩은 비교적 일반적인 성능 최적화 방법이기도 하며 최근 Vue를 사용하여 뉴스 목록 클라이언트를 만들 때 사용되었습니다. 구현 원리와 코드 일부에 대한 간략한 소개입니다.

구현 원칙

페이지를 로드할 때 항상 사진이 트래픽의 주요 소스였습니다. Base64, 스프라이트 사진 등 사진에 대한 성능 방법에는 여러 가지가 있습니다. 지연 로딩도 그중 하나입니다. 주요 원리는 첫 번째 화면에서 이미지의 src를 기본값으로 설정한 다음 창의 스크롤을 모니터링하고 이미지가 창에 나타날 때 실제 이미지 주소를 제공하는 것입니다. 첫 번째 화면의 로딩 속도와 요청 시 이미지를 로드합니다.

특정 코드

먼저 렌더링할 때 이미지는 기본 이미지를 참조한 다음 data-* 속성에 실제 주소를 넣습니다.

<image src=&#39;./../assets/default.png&#39; :src=&#39;item.allPics&#39; class=&#39;lazyloadimg&#39;>

그런 다음 스크롤을 모니터링하려면 window.onscroll을 사용하면 됩니다. 그러나 한 가지 주목할 점은 스크롤 및 크기 조정이 창과 유사하고 mousemove와 같은 이벤트가 자주 발생한다는 것입니다. 트리거 주파수를 제어하는 ​​스로틀 또는 디바운스 기능. Underscore와 Lodash의 캡슐화 방법에는 두 가지가 있으므로 여기서는 자세히 소개하지 않겠습니다.

다음 단계는 주로 세 가지 높이를 기반으로 이미지가 창에 나타나는지 여부를 결정하는 것입니다. 1. 현재 본문이 위에서 얼마나 멀리 스크롤되었는지입니다. 2. 창의 높이. 3. 현재 사진과 상단 사이의 거리입니다. 구체적인 코드는 다음과 같습니다.

window.onscroll =_.throttle(this.watchscroll, 200);
watchscroll () {
  var bodyScrollHeight = document.body.scrollTop;// body滚动高度
  var windowHeight = window.innerHeight;// 视窗高度
  var imgs = document.getElementsByClassName('lazyloadimg');
  for (var i =0; i < imgs.length; i++) {
  var imgHeight = imgs[i].offsetTop;// 图片距离顶部高度
  if (imgHeight < windowHeight + bodyScrollHeight) {
   imgs[i].src = imgs[i].getAttribute(&#39;src&#39;);
   img[i].className = img[i].className.replace(&#39;lazyloadimg&#39;,&#39;&#39;)
  }
  }
 }

Conclusion

여기까지입니다. 다음에는 손떨림 방지 조절 소스 코드 구현을 추가하겠습니다. 마지막으로 두 가지 일반적인 스크롤 판단이 추가됩니다.

1. 페이지가 홈 화면에서 스크롤됩니다(이때 맨 위로 돌아가는 버튼이 표시될 수 있음): document.body.scrollTop > window.innerHeight

2. 페이지가 아래쪽으로 스크롤되었습니다. (이때 더 많은 콘텐츠를 얻기 위해 인터페이스를 조정할 수 있습니다.): window.scrollY + window.innerHeight >

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되길 바라며, 또한 모두가 Script Home을 응원해 주시길 바랍니다. document.body.scrollTop > window.innerHeight

2.页面滚动到底部了(这时可去调接口获取更多内容)：window.scrollY + window.innerHeight > document.body.offsetHeight

위 내용은 JS를 기반으로 이미지 지연 로딩을 구현하는 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!