懒加载的实现

一、什么是懒加载？懒加载突出一个“懒”字，懒就是拖延迟的意思，所以“懒加载”说白了就是延迟加载，比如我们加载一个页面，这个页面很长很长，长到我们的浏览器可视区域装不下，那么懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域在加载二.为什么要懒加载？减少无用资源的加载提升用户体验防止加载过多图片而影响其它资源文件的加载三.懒加载的实现原理？图片的加载是由 src 引起的，当对 src 赋值时

Anita-Sun

6328人浏览 · 2022-01-31 17:45:27

Anita-Sun · 2022-01-31 17:45:27 发布

一、什么是懒加载？

懒加载突出一个“懒”字，懒就是拖延迟的意思，所以“懒加载”说白了就是延迟加载，比如我们加载一个页面，这个页面很长很长，长到我们的浏览器可视区域装不下，那么懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域在加载

二.为什么要懒加载？

减少无用资源的加载
提升用户体验
防止加载过多图片而影响其它资源文件的加载

三.懒加载的实现原理？

图片的加载是由 src 引起的，当对 src 赋值时，浏览器就会请求图片资源。根据这个原理，我们使用 HTML5 的 data-xxx 属性来储存图片的路径，在需要加载图片的时候，将 data-xxx 中图片的路径赋值给 src，这样就实现了图片的按需加载，即懒加载

四.实现步骤

知识点

window.innerHeight 是浏览器可视区的高度
document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动的过的距离
imgs.offsetTop 是元素顶部距离文档顶部的高度（包括滚动条的距离）
图片加载条件：img.offsetTop < window.innerHeight + document.body.scrollTop;

代码实现

<!DOCTYPE html>
<html lang="en">
<div class="container">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
</div>
<script>
var imgs = document.querySelectorAll('img');
function lazyLoad(){
		var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
		var winHeight= window.innerHeight;
		for(var i=0;i < imgs.length;i++){
			if(imgs[i].offsetTop < scrollTop + winHeight ){
				imgs[i].src = imgs[i].getAttribute('data-src');
			}
		}
	}
  window.onscroll = lazyLoad;
</script>
</html>