通常是使用监听scroll
或者使用setInterval
来判断,元素是否进入视图,其中scroll
由于其特别大的计算量,会有性能问题
所以在2016年初,chrome51率先提供了一个新的API
,就是IntersectionObserver
,它可以用来监听元素是否进入了设备的可视区域之内,而不需要频繁的计算来做这个判断。现在越来越多浏览器兼容此api。
示例
<img data-src="/assets/images/newNBB/pc_index/company/c26.png" alt="太平洋健康险" class="lazy-loaded" /> const images = document.querySelectorAll('.lazy-loaded'); const callback = (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { const image = entry.target; const data_src = image.getAttribute('data-src'); image.setAttribute('src', data_src); observer.unobserve(image); } }); }; const observer = new IntersectionObserver(callback); images.forEach((image) => { observer.observe(image); });