性能优化之图片懒加载

1给图片设置宽高，让图片占位

2不直接显示图片，先把图片链接存起来，比方说放到img标签的data-src=””里面

3，判断当前屏幕的位置，将当前屏幕内的图片展示出来，也就是将存起来的图片（data-src），放到src内

代码开始

Var imgs = document.querySelectorAll(‘img’);  所有的图片

当前屏幕的高度 var h = window.innerHeight;

Document.onscroll = thatop;  滚动条事件，触发函数加载当前屏幕的图片

Function thatop(){

获取滚动条的位置（当前屏幕的位置）后面方法是获取IE浏览器当前屏幕的位置

Var t=document.documentElement.scrollTop ||document.body.scrollTop；

当前屏幕的高度+滚动条的位置(最顶部)= 当前屏幕的位置（可视区域）t+h;

Var num = t+h;

For(var i=0; i<imgs.length;i++){

If(imgs[i].offsetTop <=num){

Imgs[i].src = imgs[i].getAttribute(‘data-src’);

}

}

}