<!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: the target element is observed, is a DOM node object
item.target.src = item.target.dataset.src;
});
});
function the addObserver () {
var the listItems = document.querySelectorAll ( 'IMG-Item.' );
listItems.forEach ( function (Item) {
// observe the method of example DOM node may specify which observation
// begin to observe the viewing parameter is a DOM node Object
observer.observe (Item);
});
}
the addObserver ();
</ Script>
->
<Script type = "text / JavaScript"> // Get IMG var
= document.querySelectorAll imgs ( 'IMG' );
// lazy loading method
var lazyload = function () {
// Get the height of browser scrolling
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
// Get browsing visual height
var wintop = window.innerHeight;
for ( var I = 0; I <imgs.length; I ++ ) {
// imgs [I] from the height of the top of the document .offsetTop
// if the height of the top of the document is less than the distance elements scroll height plus the height of a visual browser in the browser, to load the required
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>