基本原理:
默认给当前页面所有的img标签的src属性赋值成同一个小图,当做所有图片的默认图片,然后再添加一个自定义属性,比如data-src,里面写上当前标签真正的图片地址,在滚动页面滚动条的过程中,判断是否有图片进入可视区,进入可视区的图片需要把身上的src属性值替换成data-src属性值,这样就完成了懒加载
基本实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="./js/jquery.min.js"></script>
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
img {
display: block;
width: 300px;
height: 300px;
border: 1px solid red;
margin-top: 40px;
}
</style>
</head>
<body>
<img
style="margin-top: 1200px"
data-src="./img/logo.png"
src="./img/clock.png"
alt=""
/>
<img data-src="./img/logo.png" src="./img/clock.png" alt="" />
<img data-src="./img/logo.png" src="./img/clock.png" alt="" />
<img data-src="./img/logo.png" src="./img/clock.png" alt="" />
</body>
<script>
//获取屏幕高度
var pheight = window.innerHeight
$(window).scroll(function () {
// 总的滚动位置
var totalheight = $(document).scrollTop() + pheight
$('img').each(function () {
// 展示用
// if (totalheight >= $(this).offset().top + $(this).height()) {
if (totalheight >= $(this).offset().top) {
// 替换图片原始地址
$(this).attr('src', $(this).attr('data-src'))
} else {
$(this).attr('src', './img/clock.png')
}
})
})
</script>
</html>