Ajax_14｜渲染懒加载
Posted 接引之书
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax_14｜渲染懒加载相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="Utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#main{
width: 780px;
margin: 20px auto;
padding: 0px 50px;
border: 1px solid red;
}
#main::after{
content: "";
display: block;
clear: both; /*清除浮动*/
}
.kc{
margin: 20px;
padding: 10px;
box-shadow: 0px 0px 10px gray; /*这是加阴影*/
float: left;
}
.kc img{
width: 200px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var kcNumber = 0; //定义变量统计加载出来的模块数量
var sum = 0; //数据总数
ajax({
url:"http://localhost:8081/ajax/kc.json",
success:function(data){
var data = JSON.parse(data); //转成json类型
// console.log(data.length);
sum = data.length;
//能拿到数据,那么该怎么渲染到页面呢?
var main = document.getElementById('main');
for (var i = 0; i < 15; i++) {
var div = document.createElement("div"); //创建div
var styleclass = document.createAttribute("class"); //创建class属性
styleclass.value = "kc"; //设置class属性值
div.setAttributeNode(styleclass); //将class属性添加到div里面
//添加内容
div.innerHTML =
"<img src='"+data[i].imgURL+"''>"+
"<p>id:"+(i+1)+"</p>"+
"<p>"+data[i].title+"</p>"+
"<p>人数:"+data[i].number+"</p>"+
"<p>价格:"+data[i].price+"</p>";
main.appendChild(div); //将创建的div插入main里面
kcNumber++;
};
}
});
//滚动事件
document.onscroll = function(){
var html = document.getElementsByTagName('html')[0]; //这里是一个集合
//向下取整
//可以滚动的高度(整体高度) - 已经滚动的高度 == 可见的高度 :那就是滚动到底部了
if(Math.floor(html.scrollHeight - html.scrollTop == html.clientHeight)){
// console.log("到底了");
if(kcNumber < sum){
//这是从上面复制下来的,加载请求
ajax({
url:"http://localhost:8081/ajax/kc.json",
success:function(data){
var data = JSON.parse(data); //转成json类型
//定义一个增加条数的变量
var count = kcNumber+6;
var main = document.getElementById('main');
for (var i = kcNumber; i < count; i++) {
//虽然前面是设置不能越界,但是每次刷新都是6条数据,还是有可能错误,所以这里还要进行判断
if (kcNumber < sum) {
var div = document.createElement("div"); //创建div
var styleclass = document.createAttribute("class");//创建class属性
styleclass.value = "kc"; //设置class属性值
div.setAttributeNode(styleclass); //将class属性添加到div里面
//添加内容
div.innerHTML =
"<img src='"+data[i].imgURL+"''>"+
"<p>id:"+(i+1)+"</p>"+
"<p>"+data[i].title+"</p>"+
"<p>人数:"+data[i].number+"</p>"+
"<p>价格:"+data[i].price+"</p>";
//将创建的div插入main里面
main.appendChild(div);
}
//确定已经加载完了,才进行++
kcNumber++;
}
}
});
}
}
}
//封装ajax
function ajax(args){
var defaulArg = { //设置默认值,如果外部不定义就用这里面定义 的
method:'get', //请求方法
asyns:true, //是否异步
beforeSend:function(){
},
success:function(data){
console.log(typeof data);
},
error:function(status){
console.log(status);
}
}
//如果外边定义有值,就覆盖这默认值,(用深拷贝方法)
for(var key in args){
defaulArg[key] = args[key]; //因为这里没有纯对象的内容,就没有用递归方法
}
var xhr = new XMLHttpRequest();
xhr.open(defaulArg.method,defaulArg.url,defaulArg.asyns);
defaulArg.beforeSend(xhr);
//判断是什么请求
//如果传过来的是空 && 或者等于post,就用默认值
if(defaulArg.data && defaulArg.method.toUpperCase() === 'POST'){ //toUpperCase() :转成大写
xhr.send(defaulArg.data);
}else{
xhr.send();
}
xhr.onload = function(){
defaulArg.success(xhr.response);
}
xhr.onerror = function(){
defaulArg.error(xhr.status);
}
}
}
</script>
</head>
<body>
<div id="main">
</div>
</body>
</html>
[
{
"imgURL":"https://res.shiguangkey.com/file/202003/17/20200317164151728341566.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201911/15/20191115155119217471213.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201911/08/20191108140456072149690.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201906/11/20190611163708689459129.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/202003/17/20200317164151728341566.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201904/10/20190410164405072924475.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/202003/17/20200317164151728341566.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201911/15/20191115155119217471213.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201911/08/20191108140456072149690.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201906/11/20190611163708689459129.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/202003/17/20200317164151728341566.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201904/10/20190410164405072924475.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/202003/17/20200317164151728341566.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201911/15/20191115155119217471213.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201911/08/20191108140456072149690.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201906/11/20190611163708689459129.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/202003/17/20200317164151728341566.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201904/10/20190410164405072924475.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/202003/17/20200317164151728341566.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201911/15/20191115155119217471213.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201911/08/20191108140456072149690.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201906/11/20190611163708689459129.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/202003/17/20200317164151728341566.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201904/10/20190410164405072924475.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/202003/17/20200317164151728341566.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201911/15/20191115155119217471213.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201911/08/20191108140456072149690.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201906/11/20190611163708689459129.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/202003/17/20200317164151728341566.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201904/10/20190410164405072924475.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/202003/17/20200317164151728341566.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201911/15/20191115155119217471213.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201911/08/20191108140456072149690.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201906/11/20190611163708689459129.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/202003/17/20200317164151728341566.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201904/10/20190410164405072924475.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/202003/17/20200317164151728341566.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201911/15/20191115155119217471213.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201911/08/20191108140456072149690.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201906/11/20190611163708689459129.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/202003/17/20200317164151728341566.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201904/10/20190410164405072924475.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},{
"imgURL":"https://res.shiguangkey.com/file/202003/17/20200317164151728341566.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201911/15/20191115155119217471213.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201911/08/20191108140456072149690.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201906/11/20190611163708689459129.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/202003/17/20200317164151728341566.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
},
{
"imgURL":"https://res.shiguangkey.com/file/201904/10/20190410164405072924475.png?x-oss-process=image/format,webp",
"title":"手把手开网店",
"number":331,
"price":9.9
}
]
浏览器：
目录大纲 Directory outline
以上是关于Ajax_14｜渲染懒加载的主要内容，如果未能解决你的问题，请参考以下文章