前端性能优化，jquery实现图片分页懒加载效果，详细步骤?
效果图:
第一页默认10条数据,滚动条到末尾实现第二条数据（效果图:获取到的数据）
初始时:(验证方法效果)
懒加载:不是一次性加载完，是滚动条加载到当前才显示到图片。
(数据分析:后端全部给到前端数据，会造成页面阻塞,一般后端给到前端是分页的数据,前端通过调用chunk++往上加载，实现分页)
如下图:加载的数据
代码如下:
图片懒加载功能实现
index.js
"use strict";//严格模式
/*
lazyload：懒加载在图片未加载的时候src的地址不是真实的地址，而是加载效果...,之后才会显示真实地址图片
*/
$(function(){//发送请求
//定义传给后端的参数
var pageNo = 1;//页码
var pageSize = 10;//条数
//初始调用一次
showData();//滚动条触底，就去加载这个方法
//添加滚动事件 /一种是全局的window事件/ 也可以给当前div添加滚动事件
$(window).scroll(function(){//math.ceil()--向上取整
var scrollTop = Math.ceil($(this).scrollTop());//滚动条与顶部的高度 假如399.5
var curHeight = $(this).height();//当前可视页面高度 假如600
var totalHeight = $(document).height();//页面的总高度 假如1000
if(scrollTop+curHeight >= totalHeight){//滚动条触底，触发事件//两数字相加不可能相等于，所以加1
showData(pageNo++);
}
});
function showData(){//页码:参数添加进来
$.ajax({
type:'get',
//-----初始接口是全部。----改成另外的接口每次添加10条数据。
url:'http://localhost/list/page/'+pageNo+'/'+pageSize,//改变接口每页/条数//只能拿到10条数据
// url:'https://api.apiopen.top/getImages/page/'+pageNo+'/'+pageSize,
dataType:'json',
// headers: {
// "Authorization":"Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJrZW4iLCJpYXQiOjE1Mzc1NTQzMDksImRhdGEiOnsidXNlcm5hbWUiOiJ4dXRvbmdiYW8iLCJpc19zdXBlcnVzZXIiOjEsImlkIjoxNywibG9naW5fdGltZSI6MTUzNzU1NDMwOX0sImV4cCI6MTUzODE1NDMwOX0.32Lys4hjjY2XRpM2r9YSmpYA798u821m_M5Tzb6wxIU",
// "content-type": "application/x-www-form-urlencoded" //multipart/form-data;boundary=--xxxxxxx application/json
// },
success:function(data){//成功
var res=data.result;
console.log(res);//所有数据
//each相当于jquery的forEach循环封装的使用
$.each(res,function(index,item){
$(".ljz_item_arow ul").append(`
`)
})
//懒加载
//lazyload相当于当前图片直接去调用
$('.ljz_item_arow ul li img.lazy').lazyload({effect : "fadeIn"});
},
error:function(error){//失败
console.log(error);
}
})
}
})
nodeServer.js(启动node服务)
/*
connect 是一个node中间件 (middeware)框架
如果把一个http处理过程比作是污水处理 中间件就像是一层层的过滤网
每个中间件把http处理过程中通过改写 request或(和)response的数据、状态、实现了特定的功能
中间件就是类似于一个过滤器的东西 在客户端和应用程序之间的一个处理请求和响应的方法.
*/
//创建中间介 启动服务 node nodeServer.js
var connect = require('connect');//创建连接
var bodyParser=require('body-parser');//body解析 用于处理 JSON、RAW、Text和URL编码的数据.
var lists = {};
var app = connect()
.use(bodyParser.json())//JSON解析
.use(bodyParser.urlencoded({extended:true}))
//use()方法还有一个可选的路径字符串 对传入请求的URL的开始匹配
//use()方法来维护一个中间件队列
.use(function(req,res,next){
//跨域处理
//website you wish to allow to connect
res.setHeader('Access-Control-Allow-origin','*');//允许任何源
//Request Methods you width to allow
res.setHeader('Access-Control-Allow-Methods','CET','POST','OPTIONS','PUT','PATCH','DELETE');//允许任何方法
//Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers','*');//允许任何类型
res.writeHead(200,{"Content-Type":"text/plain/xml;charset=utf-8"});//utf-8转码
next();//next方法就是一个递归调用
})
.use('/list',function(req,res,next){
var data={
"code":"200",
"msg":"success",
"result":[
{
name:"手机",
state:"采购一",
image:"http://ww3.sinaimg.cn/large/610dc034gw1fbou2xsqpaj20u00u0q4h.jpg",
price:'399',
prices:'330'
},
{
name:"包包",
state:"采购二",
image:"http://ww2.sinaimg.cn/large/7a8aed7bgw1ex66r1sk5wj20et0m8q4q.jpg",
price:'299',
prices:'230'
},
{
name:"衣服",
state:"采购三",
image:"http://ww2.sinaimg.cn/large/610dc034gw1f4hvgpjjapj20ia0ur0vr.jpg",
price:'199',
prices:'330'
},
{
name:"电脑",
state:"采购四",
image:"http://ww4.sinaimg.cn/large/7a8aed7bjw1f37vhovzlnj20f00evabt.jpg",
price:'99',
prices:'30'
},
{
name:"电子产品",
state:"采购五",
image:"http://ww1.sinaimg.cn/large/0065oQSqly1frjd4var2bj30k80q0dlf.jpg",
price:'69',
prices:'20'
},
{
name:"电子产品",
state:"采购五",
image:"http://ww4.sinaimg.cn/large/7a8aed7bgw1eu22nypk9hj20dw0kutc0.jpg",
price:'279',
prices:'212'
},
{
name:"电子产品",
state:"采购五",
image:"http://ww1.sinaimg.cn/large/0065oQSqly1fswhaqvnobj30sg14hka0.jpg",
price:'234',
prices:'214'
},
{
name:"电子产品",
state:"采购五",
image:"http://ww4.sinaimg.cn/large/7a8aed7bgw1f0orab74l4j20go0p0jw5.jpg",
price:'256',
prices:'216'
},
{
name:"电子产品",
state:"采购五",
image:"http://ww1.sinaimg.cn/mw690/692a6bbcgw1f4fz6g6wppj20ms0xp13n.jpg",
price:'379',
prices:'219'
},
{
name:"电子产品",
state:"采购五",
image:"http://ww3.sinaimg.cn/large/7a8aed7bjw1f1h4f51wbcj20f00lddih.jpg",
price:'425',
prices:'405'
}
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww2.sinaimg.cn/large/610dc034jw1f52pe9xxn5j20dw0kidh6.jpg",
// price:'356',
// prices:'306'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww1.sinaimg.cn/large/7a8aed7bgw1f0k67zz05jj20ku0rs0y1.jpg",
// price:'234.9',
// prices:'210'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww1.sinaimg.cn/large/610dc034jw1f7qgschtz8j20hs0hsac7.jpg",
// price:'786',
// prices:'746'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww3.sinaimg.cn/large/610dc034jw1fa2vh33em9j20u00zmabz.jpg",
// price:'79',
// prices:'39'
// }, {
// name:"电子产品",
// state:"采购五",
// image:"http://ww1.sinaimg.cn/large/610dc034jw1f7sszr81ewj20u011hgog.jpg",
// price:'199',
// prices:'139'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww2.sinaimg.cn/large/610dc034jw1f6pnw6i7lqj20u00u0tbr.jpg",
// price:'299',
// prices:'209'
// }, {
// name:"电子产品",
// state:"采购五",
// image:"https://ww1.sinaimg.cn/large/0065oQSqly1g2hekfwnd7j30sg0x4djy.jpg",
// price:'129',
// prices:'120'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww3.sinaimg.cn/large/610dc034jw1f070hyadzkj20p90gwq6v.jpg",
// price:'139',
// prices:'130'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww1.sinaimg.cn/large/0065oQSqly1fs02a9b0nvj30sg10vk4z.jpg",
// price:'189',
// prices:'169'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww4.sinaimg.cn/large/610dc034jw1f46bsdcls2j20sg0izac0.jpg",
// price:'149',
// prices:'120'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"https://ww1.sinaimg.cn/large/0065oQSqly1ftf1snjrjuj30se10r1kx.jpg",
// price:'269',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww4.sinaimg.cn/large/610dc034jw1f8lox7c1pbj20u011h12x.jpg",
// price:'229',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww1.sinaimg.cn/large/610dc034jw1f7kpy9czh0j20u00vn0us.jpg",
// price:'339',
// prices:'319'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww2.sinaimg.cn/large/7a8aed7bgw1esbmanpn0tj20hr0qo0w8.jpg",
// price:'259',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"https://ww1.sinaimg.cn/large/0065oQSqly1ftf1snjrjuj30se10r1kx.jpg",
// price:'269',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww4.sinaimg.cn/large/610dc034jw1f8lox7c1pbj20u011h12x.jpg",
// price:'229',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww1.sinaimg.cn/large/610dc034jw1f7kpy9czh0j20u00vn0us.jpg",
// price:'339',
// prices:'319'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww2.sinaimg.cn/large/7a8aed7bgw1esbmanpn0tj20hr0qo0w8.jpg",
// price:'259',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"https://ww1.sinaimg.cn/large/0065oQSqly1ftf1snjrjuj30se10r1kx.jpg",
// price:'269',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww4.sinaimg.cn/large/610dc034jw1f8lox7c1pbj20u011h12x.jpg",
// price:'229',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww1.sinaimg.cn/large/610dc034jw1f7kpy9czh0j20u00vn0us.jpg",
// price:'339',
// prices:'319'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww2.sinaimg.cn/large/7a8aed7bgw1esbmanpn0tj20hr0qo0w8.jpg",
// price:'259',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"https://ww1.sinaimg.cn/large/0065oQSqly1ftf1snjrjuj30se10r1kx.jpg",
// price:'269',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww4.sinaimg.cn/large/610dc034jw1f8lox7c1pbj20u011h12x.jpg",
// price:'229',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww1.sinaimg.cn/large/610dc034jw1f7kpy9czh0j20u00vn0us.jpg",
// price:'339',
// prices:'319'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww2.sinaimg.cn/large/7a8aed7bgw1esbmanpn0tj20hr0qo0w8.jpg",
// price:'259',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"https://ww1.sinaimg.cn/large/0065oQSqly1ftf1snjrjuj30se10r1kx.jpg",
// price:'269',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww4.sinaimg.cn/large/610dc034jw1f8lox7c1pbj20u011h12x.jpg",
// price:'229',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww1.sinaimg.cn/large/610dc034jw1f7kpy9czh0j20u00vn0us.jpg",
// price:'339',
// prices:'319'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww2.sinaimg.cn/large/7a8aed7bgw1esbmanpn0tj20hr0qo0w8.jpg",
// price:'259',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"https://ww1.sinaimg.cn/large/0065oQSqly1ftf1snjrjuj30se10r1kx.jpg",
// price:'269',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww4.sinaimg.cn/large/610dc034jw1f8lox7c1pbj20u011h12x.jpg",
// price:'229',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww1.sinaimg.cn/large/610dc034jw1f7kpy9czh0j20u00vn0us.jpg",
// price:'339',
// prices:'319'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww2.sinaimg.cn/large/7a8aed7bgw1esbmanpn0tj20hr0qo0w8.jpg",
// price:'259',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"https://ww1.sinaimg.cn/large/0065oQSqly1ftf1snjrjuj30se10r1kx.jpg",
// price:'269',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww4.sinaimg.cn/large/610dc034jw1f8lox7c1pbj20u011h12x.jpg",
// price:'229',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww1.sinaimg.cn/large/610dc034jw1f7kpy9czh0j20u00vn0us.jpg",
// price:'339',
// prices:'319'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww2.sinaimg.cn/large/7a8aed7bgw1esbmanpn0tj20hr0qo0w8.jpg",
// price:'259',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"https://ww1.sinaimg.cn/large/0065oQSqly1ftf1snjrjuj30se10r1kx.jpg",
// price:'269',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww4.sinaimg.cn/large/610dc034jw1f8lox7c1pbj20u011h12x.jpg",
// price:'229',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww1.sinaimg.cn/large/610dc034jw1f7kpy9czh0j20u00vn0us.jpg",
// price:'339',
// prices:'319'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww2.sinaimg.cn/large/7a8aed7bgw1esbmanpn0tj20hr0qo0w8.jpg",
// price:'259',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"https://ww1.sinaimg.cn/large/0065oQSqly1ftf1snjrjuj30se10r1kx.jpg",
// price:'269',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww4.sinaimg.cn/large/610dc034jw1f8lox7c1pbj20u011h12x.jpg",
// price:'229',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww1.sinaimg.cn/large/610dc034jw1f7kpy9czh0j20u00vn0us.jpg",
// price:'339',
// prices:'319'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww2.sinaimg.cn/large/7a8aed7bgw1esbmanpn0tj20hr0qo0w8.jpg",
// price:'259',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"https://ww1.sinaimg.cn/large/0065oQSqly1ftf1snjrjuj30se10r1kx.jpg",
// price:'269',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww4.sinaimg.cn/large/610dc034jw1f8lox7c1pbj20u011h12x.jpg",
// price:'229',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww1.sinaimg.cn/large/610dc034jw1f7kpy9czh0j20u00vn0us.jpg",
// price:'339',
// prices:'319'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww2.sinaimg.cn/large/7a8aed7bgw1esbmanpn0tj20hr0qo0w8.jpg",
// price:'259',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"https://ww1.sinaimg.cn/large/0065oQSqly1ftf1snjrjuj30se10r1kx.jpg",
// price:'269',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww4.sinaimg.cn/large/610dc034jw1f8lox7c1pbj20u011h12x.jpg",
// price:'229',
// prices:'220'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww1.sinaimg.cn/large/610dc034jw1f7kpy9czh0j20u00vn0us.jpg",
// price:'339',
// prices:'319'
// },
// {
// name:"电子产品",
// state:"采购五",
// image:"http://ww2.sinaimg.cn/large/7a8aed7bgw1esbmanpn0tj20hr0qo0w8.jpg",
// price:'259',
// prices:'220'
// }
]
}
res.end(JSON.stringify(data));
next();
})
.use('./getadd',function(req,res,next){
var data={
"code":"200",
"msg":"success",
"result":[
{
id: "0001",
name: "张三",
province: "山东",
city:"烟台",
area:"芝罘区",
address: "新城街道",
mobile:"18660057131",
image:"http://ww1.sinaimg.cn/large/610dc034jw1f2ewruruvij20d70miadg.jpg"
},{
id: "0002",
name: "张三",
province: "山东",
city:"烟台",
area:"芝罘区",
address: "新城街道",
mobile:"18660057131",
image:"http://ww1.sinaimg.cn/large/610dc034jw1f2ewruruvij20d70miadg.jpg"
},{
id: "0003",
name: "张三",
province: "山东",
city:"烟台",
area:"芝罘区",
address: "新城街道",
mobile:"18660057131",
image:"http://ww1.sinaimg.cn/large/610dc034jw1f2ewruruvij20d70miadg.jpg"
},
{
id: "0004",
name: "张三",
province: "山东",
city:"烟台",
area:"芝罘区",
address: "新城街道",
mobile:"18660057131",
image:"http://ww1.sinaimg.cn/large/610dc034jw1f2ewruruvij20d70miadg.jpg"
},
{
id: "0005",
name: "张三",
province: "山东",
city:"烟台",
area:"芝罘区",
address: "新城街道",
mobile:"18660057131",
image:"http://ww1.sinaimg.cn/large/610dc034jw1f2ewruruvij20d70miadg.jpg"
},
{
id: "0006",
name: "张三",
province: "山东",
city:"烟台",
area:"芝罘区",
address: "新城街道",
mobile:"18660057131",
image:"http://ww1.sinaimg.cn/large/610dc034jw1f2ewruruvij20d70miadg.jpg"
},
{
id: "0007",
name: "张三",
province: "山东",
city:"烟台",
area:"芝罘区",
address: "新城街道",
mobile:"18660057131",
image:"http://ww1.sinaimg.cn/large/610dc034jw1f2ewruruvij20d70miadg.jpg"
},
{
id: "0008",
name: "张三",
province: "山东",
city:"烟台",
area:"芝罘区",
address: "新城街道",
mobile:"18660057131",
image:"http://ww1.sinaimg.cn/large/610dc034jw1f2ewruruvij20d70miadg.jpg"
},
{
id: "0009",
name: "张三",
province: "山东",
city:"烟台",
area:"芝罘区",
address: "新城街道",
mobile:"18660057131",
image:"http://ww1.sinaimg.cn/large/610dc034jw1f2ewruruvij20d70miadg.jpg"
},
{
id: "0010",
name: "张三",
province: "山东",
city:"烟台",
area:"芝罘区",
address: "新城街道",
mobile:"18660057131",
image:"http://ww1.sinaimg.cn/large/610dc034jw1f2ewruruvij20d70miadg.jpg"
},
{
id: "0011",
name: "张三",
province: "山东",
city:"烟台",
area:"芝罘区",
address: "新城街道",
mobile:"18660057131",
image:"http://ww1.sinaimg.cn/large/610dc034jw1f2ewruruvij20d70miadg.jpg"
},
{
id: "0012",
name: "张三",
province: "山东",
city:"烟台",
area:"芝罘区",
address: "新城街道",
mobile:"18660057131",
image:"http://ww1.sinaimg.cn/large/610dc034jw1f2ewruruvij20d70miadg.jpg"
}
]
}
res.end(JSON.stringify(data));
next();
})
.use('/list_get',function(req,res,next){
var data={
"code":'200',
"msg":"success",
"result":lists
}
res.end(JSON.stringify(data));
next();
})
.use('/get_List',function(){
var data={
"code":"200",
"msg":"success",
"result":[
{
name:'IT互联网',
child:[
{name:'编辑语言',child:[{name:'java'},{name:'C#/.net'},{name:'python'},{name:'accp软件开发'}]},
{name:'移动开发',child:[{name:'android开发'},{name:'ios开发'}]},
{name:'游戏开发',child:[{name:'phaser游戏开发'},{name:'webGL游戏开发',child:[{name:'webGL一代'},{name:'webGL二代'}]}]}
]
},
{name:'设计创作',
child:[{name:'平面设计',child:[{name:'电商美工'},{name:'综合平面设计'},{name:'摄影拍摄'}]},
{name:'UI设计',child:[{name:'交互设计'},{name:'webUI设计'},{name:'游戏UI设计'}]},
{name:'软件设计'}]
},
{name:'职业考证',
child:[{name:'公务员',child:[{name:'教师开始'},{name:'建筑工程'}]}]
}]
}
})
.use('/list_add',function(req,res,next){
if(req.method=='POST'){
console.log(req.body.name);
lists.push({name:req.body.name,state:req.body.state,id:index++});
var data={"code":200,"msg":"success"};
res.end(JSON.stringify(data));
}else{
res.end(JSON.stringify({}));
}
next();
})
.use('/list_del',function(req,res,next){
console.log(req.body.id);
//lists=lists.filter(list=>list.id!=req.body.id);
for(var i=0;i详细步骤:
1.先启动node服务 （node nodeServer.js）要一直开着，否则调用数据会报错
2.index.js (url：接口就写你要调取的接口数据)，可以先自己模拟数据，在改成后端接口，这里只是模拟的接口。
3.这里用到了JQ的lazyload插件，可以本地下载，也可以引入外网，不过项目中最好下载到项目中进行引入使用，方便维护和管理。
加油！！！