js懒加载
懒加载的目的就是为了提高用户体验 降低服务器压力 有时候我们的内容很长很多 但是屏幕只有那么大一点 一次加载出来全部显然是不合适的 懒加载就是为了让页面显示在屏幕可视区域内再加载当前的数据 像大型购物网站都有这个操作
下面以图片懒加载举例说明懒加载的过程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
width: 1200px;
list-style: none;
margin: 0 auto;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
li {
width: 23%;
height: 200px;
float: left;
border: 1px solid #ccc;
margin-bottom: 10px;
margin-left: 10px;
}
img {
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<ul class="clearfix">
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
<li><img _src="./1.gif" alt=""></li>
</ul>
<script>
var liList = document.querySelectorAll("li");
var lT = document.documentElement.clientHeight;//当前页面屏幕可视高度
function load() {
for (var i = 0; i < liList.length; i++) {
var jQ = document.documentElement.scrollTop;//卷曲高度
// 判断:这里是核心重点区域 图片到定位父元素的距离 小于 可视窗口 + 卷曲高度
//成立就加载src 懒加载
if (liList[i].offsetTop < jQ + lT) {
liList[i].children[0].src = liList[i].children[0].getAttribute("_src");
}
}
}
window.onscroll = load
window.onload = load
</script>
</body>
</html>
先用_src占个位置 到加载的时候再把_src的值赋值给src
或者可以这么写 用loading占位加载 data-original是真实要加载的图片 判断图片到屏幕可视区域内 用data-original的值替换src 道理是一样的
<img class="rwo" src="image/load.gif" alt="" data-original="image/图片 (1).jpeg">
<img class="rwo" src="image/load.gif" alt="" data-original="image/图片 (3).jpeg"">
<img class="rwo" src="image/load.gif" alt="" data-original="image/图片 (9).jpeg"">
<img class="rwo" src="image/load.gif" alt="" data-original="image/图片 (10).jpg"">
<img class="rwo" src="image/load.gif" alt="" data-original="image/图片 (13).jpeg"">
<img class="rwo" src="image/load.gif" alt="" data-original="image/图片 (92).jpeg"">
<img src="image/load.gif" alt="" data-original="image/图片 (1).jpg">
<img src="image/load.gif" alt="" data-original="image/图片 (2).jpg">
<img src="image/load.gif" alt="" data-original="image/图片 (19).jpg">
<img src="image/load.gif" alt="" data-original="image/图片 (23).jpg">
<img src="image/load.gif" alt="" data-original="image/图片 (33).jpg">
<img src="image/load.gif" alt="" data-original="image/图片 (37).jpg">
<img src="image/load.gif" alt="" data-original="image/图片 (38).jpg">
<img src="image/load.gif" alt="" data-original="image/图片 (39).jpg">
<img src="image/load.gif" alt="" data-original="image/图片 (40).jpg">
<img src="image/load.gif" alt="" data-original="image/图片 (41).jpg">
<img src="image/load.gif" alt="" data-original="image/图片 (42).jpg">
<img src="image/load.gif" alt="" data-original="image/图片 (43).jpg">
<img src="image/load.gif" alt="" data-original="image/图片 (44).jpg">
<img src="image/load.gif" alt="" data-original="image/图片 (45).jpg">
<img src="image/load.gif" alt="" data-original="image/图片 (46).jpg">
<img src="image/load.gif" alt="" data-original="image/图片 (47).jpg">
<img src="image/load.gif" alt="" data-original="image/图片 (48).jpg">
<img src="image/load.gif" alt="" data-original="image/图片 (49).jpg">
<img src="image/load.gif" alt="" data-original="image/图片 (50).jpg">
<img src="image/load.gif" alt="" data-original="image/图片 (51).jpg">
<img src="image/load.gif" alt="" data-original="image/图片 (52).jpg">
<img src="image/load.gif"alt="" data-original=" image/图片 (53).jpg">
<img src="image/load.gif" alt="" data-original="image/图片 (54).jpg">
其他类型的懒加载都是一样的道理 有很多很长的内容时 可以在判断到此内容在屏幕可视区域内 调该部分内容的接口 获取数据进行加载即可