js에서 이미지 지연 로딩을 구현하는 방법

이 글에서는 js에서 이미지를 지연 로딩하는 방법을 자세히 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

이미지의 지연 로딩은 프런트엔드 최적화에서 반드시 익혀야 할 부분입니다. 이미지의 지연 로딩은 대역폭을 절약하고 웹 페이지의 로드를 줄일 수 있습니다. 다음으로, 이미지 지연 로딩에 대해 제가 익힌 방법을 기록하겠습니다. 우선, 이를 구현하는 한 가지 방법은 보기 창 내 그림의 src가 먼저 로드되지만 보기 창 내에 없는 src는 스크롤 막대가 아래로 미끄러질 때 로드되지 않는 것입니다.

내려와서 로드하세요

제가 구현한 방법은 weapi를 사용하는 것인데 비교적 간단합니다. InstersectionObserver (공식 웹사이트 InstersectionObserver).
코드로 바로 넘어가겠습니다

<div>
			<img  data-src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3225163326,3627210682&fm=26&gp=0.jpg" alt="js에서 이미지 지연 로딩을 구현하는 방법" >
			<img  data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg" alt="js에서 이미지 지연 로딩을 구현하는 방법" >
			<img  data-src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1246451335,909670857&fm=26&gp=0.jpg" alt="js에서 이미지 지연 로딩을 구현하는 방법" >
			<img  data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3609981743,3469269943&fm=26&gp=0.jpg" alt="js에서 이미지 지연 로딩을 구현하는 방법" >
			<img  data-src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3225163326,3627210682&fm=26&gp=0.jpg" alt="js에서 이미지 지연 로딩을 구현하는 방법" >
			<img  data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg" alt="js에서 이미지 지연 로딩을 구현하는 방법" >
			<img  data-src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1246451335,909670857&fm=26&gp=0.jpg" alt="js에서 이미지 지연 로딩을 구현하는 방법" >
			<img  data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3609981743,3469269943&fm=26&gp=0.jpg" alt="js에서 이미지 지연 로딩을 구현하는 방법" >
		</div>

js 부분

//获取全部图片的数组
const imgs = [...document.getElementsByTagName('img')]
		// IntersectionObserver
		if(IntersectionObserver){
			let lazyloadObser = new IntersectionObserver((entries,observer)=>{
				entries.forEach((entry,index) =>{
					let lazyImage = entry.target
					if(entry.intersectionRatio>0){
						lazyImage.src = lazyImage.getAttribute('data-src');
						lazyloadObser.unobserve(lazyImage)
					}
				})
			})	
		  for(let i = 0; i < imgs.length;i++){
			  lazyloadObser.observe(imgs[i])
		  }	
		}

[권장 학습: javascript 고급 튜토리얼]

위 내용은 js에서 이미지 지연 로딩을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!