简单高效实现一个按需加载图片的逻辑

需求：
根据页面滚动，当图片进入视野，就开始加载，否则不加载任何图片。

// 页面加载完成时先调用一下，首屏内的图片。loadImg();
document.addEventListener('scroll', function(e) {
    // 跟着滚动，继续加载剩下的图片
    loadImg()})

function loadImg(){
     //slice 可以将类数组转化成数组对象
    [].slice.call(document.querySelectorAll('[data-src]')).forEach(function(item) {
        // 判断元素是否已经进入视野
        if (item.getBoundingClientRect().y<=innerHeight) {
            // 设置 src
            item.src = item.getAttribute('data-src');
            // 删除 data-src 属性，可以减少 querySelectorAll 的查询次数
            item.removeAttribute('data-src');
        }
    })
}


<img data-src="xxx">

代码简单，却很通用，很实用。方便扩展