js预加载和滚动到底部加载数据实现

2023-12-31 00:28:01
开发
39

<!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>
           * {
               margin: 0;
               padding: 0;
           }

           ul {
               min-height: 500px;
               position: relative;
               margin: 0 auto;
           }

           ul li {
               float: left;
               padding: 5px;
               list-style: none;
           }

           ul li img {
               width: 200px;
               border: 1px solid #ccc;
               border-radius: 10px;
               padding: 10px;
           }
       </style>
       <script src="./myjson.js"></script>
   </head>

let tableData = JSON.parse(JSON.stringify(imglist)).slice(0, 20)

render(tableData)
// 预加载需要一个默认图片

           function render(data) {
               let str = ''
               data.forEach((item, index) => {
                   // console.log(item)
                   str +=
                       `<li><img class='img-item${index}' src='./default.jpg' /></li>`
               });
               ul.innerHTML = str
               setTimeout(() => {
                   loopload(data)
               })
           }

// 预加载函数

           function loopload(data, i = 0) {
               // 获取当前这条数据
               let it = data[i]

               if (it) {
                   // 创建img标签
                   let img = new Image()
                   // 设置src 缓存
                   img.src = it.src
                   // 图片加载完成以后缓存结束那么就应该设置到页面当中
                   img.onload = () => {
                       document.querySelector(`.img-item${i}`).src = it.src
                       loopload(data, i + 1)

}

               }
           }
//滚动到底部加载数据关键在于获取scrollTop，scrollHeight，clientHeight，监听到底部后就数据添加或者截取总数据，然后渲染
           let num = 20
           window.onscroll = () => {
               let nowTop = document.documentElement.scrollTop
               let maxTop = document.documentElement.scrollHeight
               let clientHeight = document.documentElement.clientHeight
               // console.log(nowTop+clientHeight,maxTop )

               if (nowTop + clientHeight >= maxTop) {
                   num += 10
                   console.log('你改加载更多数据了')
                   let data = imglist.slice(num - 10, num)
                   moreRender(data)

}

           function moreRender(data) {
               let str = ''
               let num = tableData.length
               data.forEach((item, index) => {
                   // console.log(item)
                   str +=
                       `<li><img class='img-item${tableData.length + index}' src='./default.jpg' /></li>`
               });

ul.innerHTML += str

tableData = [...tableData, ...data]

setTimeout(() => {

                   loopload(tableData)
               })
           }
       </script>

</body>

</html>

原文地址:https://blog.csdn.net/qq_52840130/article/details/135294114 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1741134051974189056.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部

js预加载和滚动到底部加载数据实现

相关推荐

最近更新

热门阅读