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

最新推荐文章于 2024-07-16 17:26:59 发布

- 瑾♛年

最新推荐文章于 2024-07-16 17:26:59 发布

阅读量485

点赞数 9

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_52840130/article/details/135294114

版权

<!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>

- 瑾♛年

关注

9
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
js预加载和滚动到底部加载数据实现

/滚动到底部加载数据关键在于获取scrollTop，scrollHeight，clientHeight，监听到底部后就数据添加或者截取总数据，然后渲染。// 图片加载完成以后缓存结束那么就应该设置到页面当中。console.log('你改加载更多数据了')// 设置src 缓存。// 创建img标签。// 预加载需要一个默认图片。// 获取当前这条数据。
复制链接

扫一扫