js原生懒加载方法
<!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>
本文来自博客园,作者:zhupan,转载请注明原文链接:https://www.cnblogs.com/zhupanpan/p/11330586.html