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>

* {

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>

<body>

<ul id="myList"></ul>

<script>

let ul = document.querySelector('ul')

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>

相关推荐
Swift社区4 分钟前
Swift 解 LeetCode 321:拼接两个数组中的最大数,贪心 + 合并全解析
开发语言·leetcode·swift
0wioiw04 分钟前
Flutter基础(前端教程④-组件拼接)
前端·flutter
花生侠29 分钟前
记录:前端项目使用pnpm+husky(v9)+commitlint,提交代码格式化校验
前端
ruan11451430 分钟前
Java Lambda 类型推断详解:filter() 方法与 Predicate<? super T>
java·开发语言·spring·stream
猿榜31 分钟前
魔改编译-永久解决selenium痕迹(二)
javascript·python
广东数字化转型32 分钟前
java jar 启动应用程序
开发语言·python
阿幸软件杂货间35 分钟前
阿幸课堂随机点名
android·开发语言·javascript
一涯36 分钟前
Cursor操作面板改为垂直
前端
我要让全世界知道我很低调44 分钟前
记一次 Vite 下的白屏优化
前端·css