我们在做h5或者页面的时候,经常会遇到首屏优化,首屏优化的方式很多,比如懒加载等,最近从师姐那里学来一个,做一个记录。
我们的需求是这样,因为数据比较少,没有做分页,需要首屏一次性加在完成,但是用户再打开页面的时候仅仅能看到的只是第一屏的数据,比如用户只看到了3-5条数据,而我们一次性把所有数据渲染出来还是会影响加载速度的,所以我们就产生了一个方案:我们进入页面的时候,只做用户看到的行为,其他的行为延迟加载,具体就是,我们可以先加载用户第一眼看到的3-5条数据,然后延迟把剩下的加载一下。
代码如下:
* {
margin: 0;
padding: 0;
}
p {
line-height: 100px;
border-bottom: solid 1px #ccc;
}
const data = [
{
name: "kshdhd"
},
{
name: "rdfdgdg"
},
{
name: "4565646456"
},
{
name: "45646563ggg"
},
{
name: "dgg435435"
},
{
name: "666666666666666666gdgfg465"
},
{
name: "4546464dgfdg"
},
{
name: "4645665gdgdgdfdgdgdg"
},
{
name: "etet564646445646"
},
{
name: "kshdhd"
},
{
name: "rdfdgdg"
},
{
name: "4565646456"
},
{
name: "45646563ggg"
},
{
name: "dgg435435"
},
{
name: "gdgfg465"
},
{
name: "4546464dgfdg"
},
{
name: "4645665gdgdgdfdgdgdg"
},
{
name: "etet564646445646"
}
]
let res = data.slice(0, 6);
document.getElementById('app').innerHTML = res.map(val => {
return `
${val.name}
`;}).join('');
setTimeout(() => {
document.getElementById('app').innerHTML = [...res, ...data.slice(6, data.length)].map(val => {
return `
${val.name}
`;}).join('');
}, 1000);
欢迎关注小程序,感谢您的支持!