IntersectionObserver API js懒加载实现方法
Posted 问问大将军
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了IntersectionObserver API js懒加载实现方法相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <title></title> <style> #content { width: 100vw; height: 100vh; } #info { position: fixed; top: 0; } #target { width: 100px; height: 100px; background: red; } </style> </head> <body> <div id="info">我藏在页面底部,请向下滚动</div> <div id="content"></div> <div class="test">adsfasfd</div> <div id="target"></div> <div id="h" style="height:1000px;"></div> <div class="test">adsfasfd</div> </body> <!-- --> <script type="text/javascript"> function query(selector) { return Array.from(document.querySelectorAll(selector)); } let observer = new IntersectionObserver(function (entries) { entries.forEach(function (element, index) { // console.log(observer.takeRecords()); if (element.isIntersecting) { info.textContent = "我出来了"; } else { info.textContent = "我藏在页面底部,请向下滚动" } }); }, { root: null, threshold: [0, 1] }) query(document.querySelectorAll(‘.test‘).forEach((item) => { observer.observe(item); })) // observer.observe(document.querySelectorAll(‘.test‘)[0]) </script> </html>
以上是关于IntersectionObserver API js懒加载实现方法的主要内容,如果未能解决你的问题,请参考以下文章
IntersectionObserver API js懒加载实现方法
懒加载:判断高度法与IntersectionObserver API法