懒加载是一种按需延迟资源的方式。在加载显示页面时，并不一次性加载所有该页面所需要的图像，对于在可视区域之外的图像，可以等到用户scroll到该区域的时候，再进行加载
1、目前已经有很多库实现了懒加载，例如lazysizes，可以考虑使用
2、使用库这样的操作，相当于增加一个需要请求的js文件，增加一次http请求。所以如果能够实现原生的懒加载，能够更好的优化性能；
原理：
代码
var viewHeight = document.documentElement.clientHeight; //可视区高 function lazyLoad() { var eles = document.querySelectorAll(‘img[data-original][lazyload]‘) Array.prototype.forEach.call(eles, function (item, index) { var rect; if (item.dataset.original === "") return; rect = item.getBoundingClientRect(); if (rect.bottom >= 0 && rect.top < viewHeight) { ! function () { var img = new Image(); img.src = item.dataset.original;//提前缓存图片 img.onload = function () { item.src = img.src; } item.removeAttribute("data-original"); item.removeAttribute("lazyload"); }() } }); } lazyLoad() document.addEventListener("scroll", lazyLoad)
原文：https://www.cnblogs.com/Jamie1032797633/p/10804819.html