首頁  >  文章  >  web前端  >  js如何實現圖片的懶加載

js如何實現圖片的懶加載

醉折花枝作酒筹
醉折花枝作酒筹轉載
2021-04-20 09:25:212571瀏覽

這篇文章給大家詳細介紹一下js實作圖片的懶載入的方法。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。

js如何實現圖片的懶加載

圖片的懶​​加載是前端優化必須要掌握的東西,圖片實現懶加載可以節省頻寬又可以減輕我們網頁的負載。接下來我來記錄我所掌握的圖片懶加載的方法。首先它實現的一種方式就是我們的圖片在視圖視窗範圍內的圖片src先加載出來但是不在試圖窗口內的他是不會加載src的隨著我們的滾動條的下滑會隨之加載。
js如何實現圖片的懶加載
下來載入
js如何實現圖片的懶加載

我實作的方式是利用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(&#39;img&#39;)]
		// 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(&#39;data-src&#39;);
						lazyloadObser.unobserve(lazyImage)
					}
				})
			})	
		  for(let i = 0; i < imgs.length;i++){
			  lazyloadObser.observe(imgs[i])
		  }	
		}

【推薦學習:javascript高階教學

以上是js如何實現圖片的懶加載的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除