标签：top 请求 关键点 display strong details 步骤 浏览器 offset
为什么需要用到懒加载？
现在人们都会浏览网页，在网页上会有很多图片，例如京东、淘宝等电商网站，图片非常多，那么在浏览时，服务器的压力会很大，不仅影响了渲染页面的速度，还浪费宽带，给我们带来了浏览的不便利。
一张图片就是一个<img>标签，浏览器是否发起请求图片是根据<img>的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给<img>的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。
思路与步骤
1.加载loading图片
2.判断哪些图片是需要加载（关键点）
3.隐形加载图片
4.替换真图片
具体实现js代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>懒加载</title>
<style>
img{
height: 800px;
display:block;
}
</style>
</head>
<body>
<img src="img/001.png" imgsrc="img/39.jpg" >
<img src="img/001.png" imgsrc="img/31.jpg" >
<img src="img/001.png" imgsrc="img/20.jpg" >
<img src="img/001.png" imgsrc="img/27.jpg" >
</body>
<script>
var img=document.querySelectorAll("img")
var arr=[]//保存所有图片的offsetTop
var current=0//保存当前滚动到的图片的序号
for(var i=0;i<img.length;i++){
var t=img[i].offsetTop
arr.push(t)
}
window.onscroll=function(){
var st=document.body.scrollTop||document.documentElement.scrollTop
st=st+window.innerHeight/2
for (var i=0;i<img.length;i++){
if(st>arr[i]&&st<arr[i+1]){
current=i
}
if(st>arr[arr.length-1]){
current=arr.length-1
}
}
img[current].src=img[current].getAttribute("imgsrc")
}
</script>
</html>
可以参考https://blog.csdn.net/w1418899532/article/details/90515969
标签：top 请求 关键点 display strong details 步骤 浏览器 offset
原文地址：https://www.cnblogs.com/zhuang0913/p/14868470.html
