<!-- * @Descripttion: * @Author: voanit * @Date: 2022-09-11 09:07:08 * @LastEditors: voanit * @LastEditTime: 2022-09-11 10:05:18 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .viewport { width: 300px; height: 200px; border: 1px solid blue; overflow: auto; } .box1 { height: 600px; width: 100%; } .observed { width: 100px; height: 100px; border: 1px solid green; } .imgs { width: 100px; height: 100px; } </style> </head> <body> <div class="viewport" id="viewport"> <div class="box1"> <img src="./place.jpg" data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg" alt="图片" class="imgs" /> <img src="./place.jpg" data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg" alt="图片" class="imgs" /> <img src="./place.jpg" data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg" alt="图片" class="imgs" /> <img src="./place.jpg" data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg" alt="图片" class="imgs" /> <img src="./place.jpg" data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg" alt="图片" class="imgs" /> <img src="./place.jpg" data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg" alt="图片" class="imgs" /> <img src="./place.jpg" data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg" alt="图片" class="imgs" /> <img src="./place.jpg" data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg" alt="图片" class="imgs" /> <img src="./place.jpg" data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg" alt="图片" class="imgs" /> <img src="./place.jpg" data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg" alt="图片" class="imgs" /> <img src="./place.jpg" data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg" alt="图片" class="imgs" /> <img src="./place.jpg" data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg" alt="图片" class="imgs" /> <img src="./place.jpg" data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg" alt="图片" class="imgs" /> <img src="./place.jpg" data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg" alt="图片" class="imgs" /> <img src="./place.jpg" data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg" alt="图片" class="imgs" /> <img src="./place.jpg" data-src="http://p8.qhimg.com/bdr/__85/t01e5f605262fb61fb4.jpg" alt="图片" class="imgs" /> </div> </div> <script> let viewport = document.getElementById("viewport"); // 可视区域 let imgList = document.querySelectorAll(".imgs"); // 被观察元素 /* 开启观察者 */ // var IO = new IntersectionObserver(回调,配置项) var IO = new IntersectionObserver(fn, {}) function fn (entry) { console.log(entry, 'fn'); entry.forEach(item => { if (item.isIntersecting) { /* 表示进入可是区域 */ console.log(item.target.getAttribute('data-src')); // item.target.src = item.target.getAttribute('data-src') item.target.src = item.target.dataset.src IO.unobserve(item.target) } else { /* 离开 */ } }) } // console.dir(IO.observe()); /* 观察img */ imgList.forEach(item => { // console.log(item); IO.observe(item) }) </script> </body> </html>
图片懒加载实现的原理
猜你喜欢
转载自blog.csdn.net/qq_38806666/article/details/128990210
今日推荐
周排行