php 图片懒加载,图片懒加载的一个实例介绍

在图片比较多的网站总会看见，当浏览到那个位置，就加载那的图片。

*{

margin: 0;

padding: 0;

}

img{

display: block;

width: 500px;

height: 300px;

}

div{

margin: 500px 0 0 40px;

}

window.οnlοad=function(){

var banner=document.getElementById("banner");

var imgs=banner.getElementsByTagName("img");

add();//页面加载完成先执行一次

function getTop(obj){ //写一个方法获取图片距离top的值

var t=0; 　//定义一个保存top值的 变量

while(obj){　　//循环获取每个父级定位的top值

t+=obj.offsetTop; //获取传入或改变父级定位的top值，当到大body的时候没有 他的父级定位为null所以就停了

obj=obj.offsetParent; //获取obj的父级定位

console.log(t)

console.log(obj)

}

return t;

}

function add(){

var S = document.documentElement.scrollTop || document.body.scrollTop; //获取滑动条距top的值

var H = window.innerHeight; //获取显示区域高度(只读)

for(var i=0;i

if((S+H) > getTop(imgs[i])){ 判断图片是否进入可视区域

imgs[i].setAttribute("src",imgs[i].getAttribute("data-src")); //当进入的时候给src 赋值

}

}

}

window.οnscrοll=function(){ //每次滚动运行方法判断

add()

}

}