~~~ 页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWidth; 网页正文全文高： document.body.scrollHeight; 网页被卷去的高： document.body.scrollTop; 网页被卷去的左： document.body.scrollLeft; 网页正文部分上： window.screenTop; 网页正文部分左： window.screenLeft; 屏幕分辨率的高： window.screen.height; 屏幕分辨率的宽： window.screen.width; 屏幕可用工作区高度： window.screen.availHeight; ~~~ 关于scrollTop,offsetTop,scrollLeft,offsetLeft用法介绍，[点这里](https://i.jakeyu.top/2016/09/04/scrollTop-offsetTop-scrollLeft-offsetLeft/) #### **「原理思路」** 1. 拿到所以的图片`img dom` 2. 重点是第二步，判断当前图片是否到了可视区范围内 3. 到了可视区的高度以后，就将img的data-src属性设置给src 4. 绑定window的`scroll`事件 当然了，为了用户的体验更加，默认的情况下，设置一个**「占位图」** 本次测试代码 CSS代码👇 ~~~ <style> img{ display: block; height: 320px; margin-top: 20px; margin: 10px auto; } </style> ~~~ HTML👇 ~~~ <img src="default.png" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595328889118&di=1665d7e122bc96be92d0f3e1b2f5e302&imgtype=0&src=http%3A%2F%2Fwork.361ser.com%2FContent%2Fueditor%2Fnet%2Fupload%2Fimage%2F20171014%2F6364359407281350179759303.jpg" /> ~~~ #### 第一种方式 **「clientHeight-scrollTop-offsetTop」** 直接上我运行的代码👇 ~~~ let Img = document.getElementsByTagName("img"), len = Img.length, count = 0; function lazyLoad () { let viewH = document.body.clientHeight, //可见区域高度 scrollTop = document.body.scrollTop; //滚动条距离顶部高度 for(let i = count; i < len; i++) { if(Img[i].offsetTop < scrollTop + viewH ){ if(Img[i].getAttribute('src') === 'default.png'){ Img[i].src = Img[i].getAttribute('data-src') count++; } } } } function throttle(fn, delay) { let flag = true, timer = null; return function (...args) { let context = this; if (!flag) return; flag = false; clearTimeout(timer) timer = setTimeout(() => { fn.apply(context, args); flag = true; }, delay); }; }; window.addEventListener('scroll', throttle(lazyLoad,1000)) lazyLoad(); // 首次加载 ~~~ #### 第二种方式 使用 `element.getBoundingClientRect()` API 直接得到 top 值。 代码👇 ~~~ let Img = document.getElementsByTagName("img"), len = Img.length, count = 0; function lazyLoad () { let viewH = document.body.clientHeight, //可见区域高度 scrollTop = document.body.scrollTop; //滚动条距离顶部高度 for(let i = count; i < len; i++) { if(Img[i].getBoundingClientRect().top < scrollTop + viewH ){ if(Img[i].getAttribute('src') === 'default.png'){ Img[i].src = Img[i].getAttribute('data-src') count++; } } } } function throttle(fn, delay) { let flag = true, timer = null; return function (...args) { let context = this; if (!flag) return; flag = false; clearTimeout(timer) timer = setTimeout(() => { fn.apply(context, args); flag = true; }, delay); }; }; window.addEventListener('scroll', throttle(lazyLoad,1000)) lazyLoad(); // 首次加载 ~~~