JS IntersectionObserver交叉观察器

来源:http://itssh.cn/post/934.html

IntersectionObserver 可以自动"观察"元素是否可见,Chrome 51+ 已经支持。由于可见(visible)的本质是,目标元素与视口产生一个交叉区,所以这个 API 叫做"交叉观察器"
使用IntersectionObserver实现图片懒加载功能:
ps:使用最新新版Chrome、Firefox测试,IE11及其以下暂不支持

案例:



    
        
        
        
        使用IntersectionObserver实现懒加载
        
        
    
    
        
        
  • 正在加载...
  • 正在加载...
  • 正在加载...
  • 正在加载...
  • 正在加载...
  • 正在加载...
  • 正在加载...
  • 正在加载...
  • 正在加载...
  • 正在加载...
  • 正在加载...
  • 正在加载...
  • 正在加载...
  • 正在加载...
  • 正在加载...
  • 正在加载...
  • 正在加载...
  • 正在加载...
  • 正在加载...
  • 正在加载...
  • 正在加载...
  • 正在加载...

来源:http://itssh.cn/post/934.html

效果:

JS IntersectionObserver交叉观察器_第1张图片
Paste_Image.png

你可能感兴趣的:(JS IntersectionObserver交叉观察器)