实现图片的懒加载
实现原理是通过判断图片是否在浏览器窗口显示,显示时在进行加载
let length = document.getElementsByTagName('img').length //获取图片总数量
let imgs = document.getElementsByTagName('img') //获取图片列表
let now = 0
window.onscroll = lazylaod
function lazylaod() {
let height = document.documentElement.clientHeight //获取浏览器窗口高度
let scrollTop = document.documentElement.scrollTop //获取滚动长度
for (let i = now; i < length; i++) {
if (imgs[i].offsetTop - scrollTop < height) { //offsetTop获取元素到浏览器顶部的距离
imgs[i].src = imgs[i].getAttribute('data-src')
now = i + 1
}
}
}
localStorage和sessionStorage、cookie区别
cookie是HTML4中提出来保存用户数据的机制
localStorage和sessionStorage是HTML5中提出来可以存储大量数据的机制
相同点
- 都是保存用户信息,存储的都是字符串
不同点
- cookie不设置有效期就是存储在内存中,回话结束后cookie就失效,如果设置了存储时间cookie就存储在硬盘中,到期后cookie失效
- localStorage只要存储就是永久存在,关闭浏览器或者关闭页面也不会消失,除非主动删除
- sessionStorage只在当前会话下有效,关闭了浏览器窗口后sessionStorage就会失效。每一个窗口的数据是单独存放的,即使打开了相同的页面,sessionStorage也是不相同
- cookie数据每次都会发送给服务器,loaclStorage和sessionStorage不会与服务器进行通信,只是为了存储数据
- 因为cookie每次都要发送给服务器,所有cookie大小限制在4KB,loaclStorage和sessionStorage大小为5M
- loaclStorage和sessionStorage不与服务器进行通信,安全性更高
- loaclStorage和sessionStorage提供了单独的方法进行操作
setItem(key,value) //以键值对的方式存储数据
getItem(key) //通过查询键获取对应的value
removeItem(key) //删除响应的key -value
clear() //清除当前会话的所有数据
key(index) //通过值查询键
垂直居中
两个盒子是父子关系的时候
- 同宽高 + padding
将父元素和子元素设置相同的宽高,再给父元素设置padding,此时padding会将子元素挤到中间的位置。 - absolute + margin:auto
利用了绝对定位盒模型特点:left + right + width + margin + padding = 包含块的宽度(父元素宽度),top + bottom + height + margin + padding = 包含块的高度(父元素高度),
将父元素相对定位,left 、 right、 top、 bottom设置为0,padding默认为0,margin设置为auto,元素会自动居中。 - absolute + 负margin(transform)
父相对子绝对,在设置负margin将多余的位移拽回到中心。如果不知道子元素的大小,使用transform(可能会出现兼容问题)
lefrt:50%
top:50%
margin-top:-50%
margin-left:-50%
或者
transform:translate3d(-50%,-50%) - flex(大杀器)
设置父元素:
display:flex
justify-content:center
align-items:content