JavaScript图片懒加载

图片懒加载 SDK

• 滚动节流
• 图片进入视图内进行加载（elem.getBoundingClientRect()）
• 图 top 和 window.innerHeight

代码示例：

<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script>
    function mapImgesAndTryLoad() {
        const images =  document.querySelectorAll('img[data-src]')
        if (images.lenght ===0) return
        images.forEach(img => {
            const rect = img.getBoundingClientRect()
            if (rect.top < window.innerHeight) {
                img.src = img.dataset.src
            }
        })
    }
    window.addEventListener('scroll', _.thottle(() => {
        mapImgesAndTryLoad()
    }))
    // 页面初始化时调用
    mapImgesAndTryLoad()
</script>