首屏优化图片懒加载

图片懒加载有几个重要的点:

1. 图片 的src放到其他属性上，加统一的类名，供选择和 加样式，比如:

<img class="pic" alt="加载中"  
    data-src="http://ww1.sinaimg.cn/large/b0b365f5ly1fl8gmghdbsj20qo0bt3zo.jpg">

2. js懒加载函数

有几个重点:

1. 获取可视区域的高度,ie9+ 用window.innerHeight

viewHeight = window.innerHeight || window.documentElement.clientHeight

1. 获取当前元素距离可视区域顶部的高度用 getBoundingClientRect().top

getBoundingClientRect 和 clientHeight的关系

1. 当getBoundingClientRect().top 小于 viewHeight的时候，给元素的src 赋值

 ele.src = ele.getAttribute('data-src');

1. 最后就是监听滚动事件了

lazyload完整版

function lazyload() {
    const viewHeight = window.innerHeight || window.documentElement.clientHeight;
    let imgs = document.querySelectorAll('.pic');
    let num = 0, len = imgs.length;
    for(let i = num; i < len; i ++) {
        if(imgs[i].getBoundingClientRect().top < viewHeight) {
            console.log('i', i);
            imgs[i].src = imgs[i].getAttribute('data-src');
            num += 1 ;
        }
    }
}
window.addEventListener('scroll', lazyload);

当然这样监听滚动肯定耗费性能，建议加上节流。可参考上一篇文章