【JavaScript】懒加载

懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。

Web应用程序做的最多就是和后台数据库交互，而查询数据库是种非常耗时的过程。当数据库里记录过多时，查询优化更显得尤为重要。为了解决这种问题，有人提出了缓存的概念。缓存就是将用户频繁使用的数据放在内存中以便快速访问。在用户执行一次查询操作后，查询的记录会放在缓存中。当用户再次查询时，系统会首先从缓存中读取，如果缓存中没有，再查询数据库。缓存技术在一定程度上提升了系统性能，但是当数据量过大时，缓存就不太合适了。因为内存容量有限，把过多的数据放在内存中，会影响电脑性能。而另一种技术，懒加载可以解决这种问题。
在这里插入图片描述
向下滚动时：

接近页面底部时，“延迟2秒”加载剩余内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin:0;padding:0;
    }
    html,body{height:100%}
    ul li{
        overflow:hidden;
        height:150px;
        width:450px;
    }
    ul li img{float:left; height:120px;}
    ul li p{font-size: 15px; opacity: 0.8; padding-top: 10px;}
</style>
<body>
    
        
        <h1>最新上映</h1>
        <ul id="list"></ul>
        <!-- 测试样式：  -->
         
            <!-- <li><img src="img/拜托了，八小时.png">
            <h3>拜托了,八小时</h3>
            <p>修武道、踏九霄、破天地、傲苍穹</p></li> -->
            
        </ul>
       
    
</body>
<script>
    var arr1=[
        {
        name:"拜托了，八小时",
        url:"img/拜托了，八小时.png",
        info:"大神总裁叶天被困盘古系统生命遭遇危机，虚拟格斗一姐白薇展开营救的奇幻甜爱故事。"
    },
    {
        name:"初次爱你",
        url:"img/初次爱你.png",
        info:"卢晚晚多年暗恋失败,追求同校的超级学霸任初,收获了一段健康独立的校园恋情"
    },  {
        name:"哥，你好",
        url:"img/哥，你好.png",
        info:"与父亲老伍终年不合的小伍阴差阳错回到80年代，意外搅黄了父亲与母亲大陆的初次相遇。"
    },  {
        name:"美人镖局.",
        url:"img/美人镖局.png",
        info:"某朝年间，齐王杀兄长灵宗夺位，灵宗幼子出逃，忠灵宗之朝臣纷纷被诛， 天下动荡。"
    },  {
        name:"平凡英雄.",
        url:"img/平凡英雄.png",
        info:"医生、机组、乘客、警察等新疆各行人民跨越1400公里，长达8小时的生命接力，创造生命奇迹感人至深的真实事迹。"
    },  {
        name:"神奇动物·邓布利多之谜.",
        url:"img/神奇动物·邓布利多之谜.png",
        info:"阿不思·邓布利多教授意识到强大的黑巫师盖勒特·格林德沃正试图夺取魔法世界的控制权。"
    }, 
 {
        name:"搜救",
        url:"img/搜救.png",
        info:"阿德夫妇向当地相关部门寻求援助，搜救行动即刻展开。黄金救援时间24小时过去了，孩子却仍未找到。"
    }
]
var arr2=[
        {
        name:"绝世武神 动态漫画 第5季",
        url:"img/绝世武神 动态漫画 第5季.png",
        info:"现代学生林枫，因为一场车祸，穿越到武魂未觉醒的“废物”林家大少爷身上"
    },
    {
        name:"我们的当打之年",
        url:"img/我们的当打之年.png",
        info:"该剧讲述了一对90后的闺蜜毕业之后选择了不同的人生道路"
    },  {
        name:"一年一度喜剧大赛.",
        url:"img/一年一度喜剧大赛.png",
        info:"借平凡生活小事挖掘喜剧人创作能力、表演能力和合作能力"
    },  {
        name:"风吹半夏.png",
        url:"img/风吹半夏.png",
        info:"许半夏经历了良心与资本、道德与利益的矛盾与挣扎，既有痛苦、波折，也有甘甜、收获"
    },  {
        name:"卿卿日常.",
        url:"img/卿卿日常.png",
        info:"韬光养晦的新川六少主尹峥，与只想努力落选、在老家安逸度日的李薇意外结缘"
    }
]
renderHTML(arr1)
function renderHTML(arr){
    // += ：到底部了懒加载时不覆盖之前内容，但是重新加载之前的内容会让屏幕出现闪动，影响用户体验
    // list.innerHTML += arr.map(function(item){
    //     return `
    //     
    //         ${arr[i].name}

    // //             
`
    // }).join("")
// 消除重加载内容屏幕的闪动,优化用户体验：
    for (var i=0;i<arr.length; i++){
        var oli=document.createElement("li")
        oli.innerHTML=`  ${arr[i] .url}" >
            ${arr[i].name}${arr[i].info}
`
                // 在已存在内容的下面添加,而不是将加载的内容和存在的内容放在一起重新加载放入页面
                list.appendChild(oli)

    }
}
isLoading=false;
// 判断滚动,滚动条到底了触发事件,加载剩余内容（距离底部还有100px，就加载剩余内容）
window.onscroll=function () {
    // 获取内容对于body的偏移量
    var listHeight=list.offsetHeight;
    var listTop=list.offsetTop;
    //console.log(listTop,listHeight)//42 1050 [42:标题宽度，ul距离顶部的偏移量。1050:ul占据的整个内容的高度，一共是七张*150px=1050px]
    // 获取页面高度值：
    // console.log(listTop+listHeight)//1092
    // 不采用：console.log(innerHeight),是因为,页面增加了滚动条,要想获取增加滚动条的最终高度,只能用：listTop+listHeight
    
    
    // listTop+listHeight:这个值是固定的,我们需要获取用户拉动滚动条时内容实时占用的高度
    var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
    var  windowHeight=document.documentElement.clientHeight
    // windowHeight:固定值  scrollTop：随着滚动条变化
    //console.log(windowHeight,scrollTop)//滚动条拉到底部：902 190，加起来正好是1092


    //    拉动滚动条获取内容的高度,实时变化
    //console.log(Math.round(windowHeight+scrollTop))

    // 判断是否用户将滚动条拉到底部,是否要加载剩余内容
    // if(Math.round(windowHeight+scrollTop)===(listHeight+listTop)){
    //     console.log("到底了")

    // }

    // "快要到底了,当小于100px时就会触发，现在要求只触发一次":isLoading
    if(isLoading) return 
    if((listHeight+listTop)-Math.round(windowHeight+scrollTop)<100){
        console.log("快要到底了")
        isLoading=true;

        // 渲染下一页数据，模拟延时获取（真实情况数据过多情况下加载需要时间）
        setTimeout(function() {
            renderHTML(arr2)
            // 接下来还有数据未加载,所以让isLoading保持为false的状态,等再次到底时再次触发事件
            isLoading=false;
        },2000)
       
    }
}
    </script > 
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158

相关阅读:
spring---第四篇
 C#的预处理指令
 会多门编程语言的你，最推荐哪3-5门语言？
WIFI 万[néng]钥匙 v5.0.10/v4.9.80 SVIP版！
Linux_概述
 PMP提分练习
 helm简介
 Linux-实操篇8-shell脚本编写
 PDF文件怎么合并在一起？这三种方法快利用起来
 把微信变成找券返利机器人，淘宝客查券返利小助手自动赚佣金实现方法分享
原文地址：https://blog.csdn.net/m0_49442965/article/details/128134973