Advertisement

JS中的IntersectionObserver用于监控元素显示和隐藏,并支持图片的懒加载技术

阅读量:

IntersectionObserver用于检测元素在视口中的显示状态,能够监测元素在可视区域中呈现的比例,其中1表示元素完全可见,0表示元素完全不可见。需要注意的是,通过opacity和visibility属性控制的元素可见性变化不会触发该观察器。此API在实现图片懒加载功能时具有广泛应用。

代码:

复制代码
 <!DOCTYPE html>

    
 <html lang="en">
    
 <head>
    
     <meta charset="UTF-8">
    
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
     <title>Document</title>
    
     <style>
    
     .box{
    
         width:100px;
    
         height:100px;
    
         margin: 10px;
    
         background: #ccc;
    
     }
    
     </style>
    
 </head>
    
 <body>
    
     <div class="box box1" s

全部评论 (0)

还没有任何评论哟~