jsで画像の遅延読み込みを実装する方法

この記事では、画像を遅延読み込みする js メソッドについて詳しく紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

画像の遅延読み込みは、フロントエンドの最適化で習得する必要があります。画像の遅延読み込みにより、帯域幅が節約され、Web ページの負荷が軽減されます。次に、私が習得した画像の遅延読み込み方法を記録します。まず、実装方法の 1 つは、ビュー ウィンドウ内のピクチャの 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 中国語 Web サイトの他の関連記事を参照してください。