图片懒加载,就是图片延迟加载,在需要显示图片的时候在进行资源加载,减少页面初次加载时间,提升用户体验
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
height: 3000px;
}
img{
position: absolute;
top:2000px;
}
</style>
</head>
<body>
<img id="img" src=" " mySrc="./img/0.gif" alt="">
</body>
<script>
//图片懒加载,就是图片延迟加载,在需要显示图片的时候在进行资源加载,减少页面初次加载时间,提升用户体验
window.onscroll = function(){
//获取页面滚动偏移量
var scroll = document.body.scrollTop || window.pageYOffset || document.documentElement.scrollTop;
//获得当前浏览器可视窗口高度
var ch = document.documentElement.clientHeight;
//当图片将要显示在页面的时候,再进行资源的加载
if(scroll+ch >=2000-100){
//将自定义属性中存储的路径赋值给src
// img.src=img.mySrc;//错误的,自定义属性的值不能通过.语法直接获取
img.src=img.getAttribute("mySrc");
}
}
</script>
</html>