代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
ul,ul li{
list-style:none;
}
#list{
width:1200px;
margin:0 auto;
display:flex;
flex-wrap:wrap;
}
#list li{
width:350px;
height:310px;
border:1px solid #000;
margin:20px;
}
#list li img{
width:100%;
height:100%;
}
</style>
</head>
<body>
<ul id="list">
<li><img abc="images/1.jpg" alt=""></li>
<li><img abc="images/2.jpg" alt=""></li>
<li><img abc="images/3.jpg" alt=""></li>
<li><img abc="images/4.jpg" alt=""></li>
<li><img abc="images/5.jpg" alt=""></li>
<li><img abc="images/6.jpg" alt=""></li>
<li><img abc="images/7.jpg" alt=""></li>
<li><img abc="images/8.jpg" alt=""></li>
<li><img abc="images/9.jpg" alt=""></li>
<li><img abc="images/1.jpg" alt=""></li>
<li><img abc="images/2.jpg" alt=""></li>
<li><img abc="images/3.jpg" alt=""></li>
<li><img abc="images/4.jpg" alt=""></li>
<li><img abc="images/5.jpg" alt=""></li>
<li><img abc="images/6.jpg" alt=""></li>
<li><img abc="images/7.jpg" alt=""></li>
<li><img abc="images/8.jpg" alt=""></li>
<li><img abc="images/9.jpg" alt=""></li>
</ul>
<script>
/*
1.图片路径放在非src属性中 【能阻止加载图片】
2.加载可视区部分，获取 刚才放有图片路径的属性值
3.再将可视区部分的img设置成刚才获取的图片路径
*/
var imgs = document.getElementsByTagName('img'); // 获取所有图片
var pageHeight = document.documentElement.clientHeight; // 浏览器可视高度 【固定】
window.onscroll = lazyLoad;
function lazyLoad(){ // 窗口滚动事件
for(var i=0;i<imgs.length;i++){ // 每一张图片距离顶部距离是固定的 不会发生改变 【固定】
// 用浏览器可视高与页面卷去的高度之和 与 每一张图片距离顶部距离做比较，如果 高度之和大于等于 某一张图片的高度，就显示该图片
if(pageHeight+ document.documentElement.scrollTop >= imgs[i].offsetTop){
imgs[i].src = imgs[i].getAttribute('abc'); // 获取满足条件图片的abc属性，将其值赋给图片的src属性
}
}
}
lazyLoad();
</script>
</body>
</html>
效果
