자바스크립트를 사용한 이미지 지연 로딩의 예

이미지 지연 로딩도 비교적 일반적인 성능 최적화 방법입니다. 이 글에서는 기본 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;)
  }
  }
 }

위 내용은 자바스크립트를 사용한 이미지 지연 로딩의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!