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’);
}
}
}