图片懒加载
图片的延迟加载最常见的是只加载网页显示在屏幕中的图片，如果用户没有滚动到网页靠下的部分，那图片就不用显示了，节省HTTP请求和带宽，同时提高首屏的加载速度，提高用户体验。
具体思路是通过同一张图片占位,使用data-src 存储真实地址,然后在滚动时,判断element.offset().top <= $(window).height() + $(window).scrollTop(),如果符合条件,通过attr方法改变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">
<title>懒加载</title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
img {
height: 427px;
}
</style>
</head>
<body>
<ul class="container">
<li>
<img src="http://via.placeholder.com/641x427" data-src='http://www.huaceys.com/images6/huacesheji_b_1.jpg'
alt="">
</li>
<li>
<img src="http://via.placeholder.com/641x427" data-src="http://www.huaceys.com/images6/huacesheji_b_2.jpg"
alt="">
</li>
<li>
<img src="http://via.placeholder.com/641x427" data-src="http://www.huaceys.com/images6/huacesheji_b_3.jpg"
alt="">
</li>
<li>
<img src="http://via.placeholder.com/641x427" data-src="http://www.huaceys.com/images6/huacesheji_b_4.jpg"
alt="">
</li>
<li>
<img src="http://via.placeholder.com/641x427" data-src="http://www.huaceys.com/images6/huacesheji_b_5.jpg"
alt="">
</li>
<li>
<img src="http://via.placeholder.com/641x427" data-src="http://www.huaceys.com/images6/huacesheji_b_6.jpg"
alt="">
</li>
<li>
<img src="http://via.placeholder.com/641x427" data-src="http://www.huaceys.com/images6/huacesheji_b_7.jpg"
alt="">
</li>
<li>
<img src="http://via.placeholder.com/641x427" data-src="http://www.huaceys.com/images6/huacesheji_b_8.jpg"
alt="">
</li>
</ul>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script>
function start(params) {
$('.container img:not([data-isLoaded])').each(function () {
var $node = $(this)
if (isShow($node)) {
// 延迟500ms
// setTimeout(() => {
// loadImg($node)
// }, 500);
loadImg($node)
}
})
}
// 返回判断结果
function isShow($node) {
// offsetTop 当前元素相对于其 offsetParent 元素的顶部的距离。
// $(window).height() 浏览器窗口的视口的高度。
// $(window).scrollTop() 是这个元素的顶部到它的最顶部可见内容（的顶部）的距离的度量。
return $node.offset().top <= $(window).height() + $(window).scrollTop()
}
// 加载图片
function loadImg($img) {
$img.attr('src', $img.attr('data-src'))
$img.attr('data-isLoaded', 1)
}
//初始化
start()
// 绑定事件
$(window).on('scroll', function () {
start()
})
</script>
</body>
</html>
