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中文網其他相關文章！