基于IntersectionObserver的高效轻量的图片懒加载库

2020-03-28 19:58:10Tags: javascript

懒加载(lazy load),这是一个非常实用的技术方案,通常会用于长列表图片,这里就以图片加载为例,通用原理就是,当图片进入浏览器可视范围才进行加载,如果不使用懒加载,当一个页面的图片非常多的时候,会导致整个页面加载非常缓慢,从而影响用户体验,以往的技术底层方案都是用getBoundingClientRect方法来获取元素的坐标,通过滚动条滚动进行判断元素是否已进入可视范围。

而现在有了新的方案,基于一个非常新的IntersectionObserver API,浏览器兼容详情请查看

intersectionobserver 这里介绍一款基于此API的库Lozad.js,具体用法及说明请查看其主页