<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LozyLoad</title>
<style>
.images{
display: flex;
flex-direction: column;
text-align: center;
width: 500px;
}
.img-item{
height:400px;
width: 400px;
margin: 20px;
}
</style>
</head>
<body>
<div class="images">
<img class="img-item" alt="loading" data-src="imgs/img01.jpg">
<img class="img-item" alt="loading" data-src="imgs/img02.jpg">
<img class="img-item" alt="loading" data-src="imgs/img03.jpeg">
<img class="img-item" alt="loading" data-src="imgs/img04.jpg">
<img class="img-item" alt="loading" data-src="imgs/img02.jpg">
</div>
<!--
<script type="text/javascript">
//獲取觀察器實例 changes是被觀察的對象數組
var observer = new IntersectionObserver(function(changes){
console.log(changes);
changes.forEach(function(index,item){
if(item.intersectionRatio > 0 && item.intersectionRatio < 1)
//target：被觀察的目標元素，是一個 DOM 節點對象
item.target.src = item.target.dataset.src;
});
});
function addObserver(){
var listItems = document.querySelectorAll('.img-item');
listItems.forEach(function(item){
//實例的observe方法可以指定觀察哪個DOM節點
//開始觀察 observe的參數是一個 DOM 節點對象
observer.observe(item);
});
}
addObserver();
</script>
-->
<script type="text/javascript">
//獲取img
var imgs = document.querySelectorAll('img');
//懶加載方法
var lazyload = function(){
//獲取瀏覽器滾動高度
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
//獲取瀏覽器可視高度
var winTop = window.innerHeight;
for(var i=0;i < imgs.length;i++){
//imgs[i].offsetTop 距離文檔頂部的高度
//如果元素距離文檔頂部的高度小於 瀏覽器的滾動高度加瀏覽器的可視高度，則需要加載
if(imgs[i].offsetTop < scrollTop + winTop ){
imgs[i].src = imgs[i].getAttribute('data-src');
}
}
}
//調用懶加載函數
function throttle(method,delay){
var timer = null;
return function(){
var context = this, args=arguments;
clearTimeout(timer);
timer=setTimeout(function(){
// method.apply(context,args);
method()
},delay);
}
}
window.onscroll = throttle(lazyload,200);
</script>
</body>
</html>
