<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
</head>
<body onscroll="Lazy.Load()">
1<br />1<br />1<br /><img lazy="/img/1.jpg" width="200px" height="200px" />
1<br />1<br />1<br />
<br /><br /><br /><img lazy="/img/2.jpg" width="200px" height="200px"/>
1<br />1<br />1<br />
<br /><br /><br /><img lazy="/img/3.jpg" width="200px" height="200px"/>
1<br />1<br />1<br />
<br /><br /><br /><img lazy="/img/4.jpg" width="200px" height="200px"/>
1<br />1<br />1<br />
<br /><br /><br /><img lazy="/img/5.jpg" width="200px" height="200px"/>
1<br />1<br />1<br />
<br /><br /><br /><img lazy="/img/6.jpg" width="200px" height="200px"/>
1<br />1<br />1<br />
<br /><br /><br /><img lazy="/img/7.jpg" width="200px" height="200px"/>
1<br />1<br />1<br />
<br /><br /><br /><img lazy="/img/8.jpg" width="200px" height="200px"/>
1<br />1<br />1<br />
<br /><br /><br /><img lazy="/img/9.jpg" width="200px" height="200px" />
1<br />1<br />1<br />
<br /><br /><br /><img lazy="/img/10.jpg" width="200px" height="200px" />
<br /><br /><br /><img lazy="/img/11.jpg" width="200px" height="200px"/>
<br /><br /><br /><img lazy="/img/12.jpg" width="200px" height="200px"/>
<br /><br /><br /><img lazy="/img/13.jpg" width="200px" height="200px"/>
<br /><br /><br /><img lazy="/img/14.jpg" width="200px" height="200px"/>
<br /><br /><br /><img lazy="/img/15.jpg" width="200px" height="200px"/>
<br /><br /><br /><img lazy="/img/16.jpg" width="200px" height="200px"/>
<br /><br /><br /><img lazy="/img/17.jpg" width="200px" height="200px"/>
<br /><br /><br /><img lazy="/img/18.jpg" width="200px" height="200px"/>
<br /><br /><br /><img lazy="/img/19.jpg" width="200px" height="200px" />
</body>
<script>
var Lazy = {
Img: null,
getY: function(obj) {//获取元素Y轴位置
var curtop = 0;
if (obj && obj.offsetParent) {
while (obj.offsetParent) {
curtop += obj.offsetTop;
obj = obj.offsetParent;
};
} else if (obj && obj.y) curtop += obj.y;
return curtop;
},
scrollY: function() {//拖动条移动y轴距离
var de = document.documentElement;
return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop || 0;
},
windowHeight: function() {//屏幕高
var de = document.documentElement;
return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
},
CurrentHeight: function() {
return Lazy.scrollY() + Lazy.windowHeight();
},
Load: function() {
if (Lazy.Img == null) {
Lazy.Init();
}
var currentHeight = Lazy.CurrentHeight();
for (_index = 0; _index < Lazy.Img.length; _index++) {
var imgTop = Lazy.getY(Lazy.Img[_index]);
if (imgTop < currentHeight) {
Lazy.Img[_index].src = Lazy.Img[_index].getAttribute("lazy");
}
}
},
Init: function() {
var allImg = document.getElementsByTagName("img");
Lazy.Img = allImg;
},
Test: function() {
Lazy.Init();
alert(Lazy.CurrentHeight());
}
};
</script>
</html>