第一模块（课程信息）：
课程名称:2周刷完100道前端优质面试真题
课程章节:第十章第十五节 实现一个H5图片懒加载SDK？
主讲老师:双越
第二模块（课程内容）：
课程内容概述
一、首先，我们来分析问题
1、定义
img src="loading.png" data-src=xxx.png
2、页面滚动，图片漏出时，将data-src赋值给src
3、滚动要注意运用节流
二、获取图片定位
1、 元素的位置elem.getBoundingClientRect()
2、 图片和window.innerHeight
代码演示：
<body>
<div class="item-container">
<p>新闻标题</p>
<img src="./img/loading.gif" data-src="./img/animal1.jpeg"/>
</div>
<div class="item-container">
<p>新闻标题</p>
<img src="./img/loading.gif" data-src="./img/animal2.webp"/>
</div>
<div class="item-container">
<p>新闻标题</p>
<img src="./img/loading.gif" data-src="./img/animal3.jpeg"/>
</div>
<div class="item-container">
<p>新闻标题</p>
<img src="./img/loading.gif" data-src="./img/animal4.webp"/>
</div>
<div class="item-container">
<p>新闻标题</p>
<img src="./img/loading.gif" data-src="./img/animal5.webp"/>
</div>
<div class="item-container">
<p>新闻标题</p>
<img src="./img/loading.gif" data-src="./img/animal6.webp"/>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script>
function mapImagesAndTryLoad(){
const images = document.querySelectorAll('data[data-src]')
if(images.length===0) return;
images.forEach(img=>{
const rect = img.getBoundingClientRect();
if(rect.top<window.innerHeight){
// 图片漏出来
img.src=img.dataset.src;
img.removeAttribute('data-src');
}
})
}
window.addEventListener('scroll',_.throttle(()=>{
mapImagesAndTryLoad();
},1000))
mapImagesAndTryLoad();
</script>
</body>
第三模块（学习心得）：
1、页面滚动时，要运用getBoundingClientRect()获取图片的位置
2、页面滚动时，结合lodash，考虑到节流