在圖片比較多的網站總會看見，當瀏覽到那個位置，就載入那的圖片。 ...
在圖片比較多的網站總會看見，當瀏覽到那個位置，就載入那的圖片。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
display: block;
width: 500px;
height: 300px;
}
div{
margin: 500px 0 0 40px;
}
</style>
</head>
<body>
<div id="banner">
<img data-src="image/01.jpeg">
<img data-src="image/02.jpeg">
<img data-src="image/03.jpeg">
<img data-src="image/04.jpeg">
<img data-src="image/05.jpg">
<img data-src="image/06.png">
<img data-src="image/07.png">
<img data-src="image/08.png">
</div>
<script type="text/javascript">
window.onload=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<imgs.length;i++){ //迴圈圖片
if((S+H) > getTop(imgs[i])){ 判斷圖片是否進入可視區域
imgs[i].setAttribute("src",imgs[i].getAttribute("data-src")); //當進入的時候給src 賦值
}
}
}
window.onscroll=function(){ //每次滾動運行方法判斷
add()
}
}
</script>
</body>
</html>
