日常敷衍上代码
html部分
<body>
<ul>
<li><img data-src="http://pic.netbian.com/uploads/allimg/191107/001505-1573056905400d.jpg" alt=""></li>
<li><img data-src="http://pic.netbian.com/uploads/allimg/190614/221508-15605217086e6f.jpg" alt=""></li>
<li><img data-src="http://pic.netbian.com/uploads/allimg/191026/001458-157202009858e9.jpg" alt=""></li>
<li><img data-src="http://pic.netbian.com/uploads/allimg/191108/002234-15731437546bd1.jpg" alt=""></li>
<li><img data-src="http://pic.netbian.com/uploads/allimg/191019/004242-15714169620748.jpg" alt=""></li>
<li><img data-src="http://pic.netbian.com/uploads/allimg/190925/170734-1569402454d977.jpg" alt=""></li>
<li><img data-src="http://pic.netbian.com/uploads/allimg/190909/220415-1568037855e60a.jpg" alt=""></li>
<li><img data-src="http://pic.netbian.com/uploads/allimg/190817/223144-1566052304ba49.jpg" alt=""></li>
<li><img data-src="http://pic.netbian.com/uploads/allimg/190713/104217-156298573792c2.jpg" alt=""></li>
<li><img data-src="http://pic.netbian.com/uploads/allimg/190727/100747-15641932677503.jpg" alt=""></li>
</ul>
</body>
css部分
* {
margin: 0;
padding: 0;
}
img {
margin-top: 50px;
width: 800px;
}
/*其实css写不写都无所谓*/
JQuary部分
showImg()
$(document).scroll(showImg);
function showImg() {
let viewHeight = $(window).height();
let scrollTop = $(document).scrollTop();
$('img').each(function (i, elem) {
console.log(i);
console.log(elem);
if ($(elem).offset().top <= viewHeight + scrollTop) {
let imgSrc = $(elem).attr('data-src');
$(elem).attr('src', imgSrc)
}
})
}