首屏优化图片懒加载

最新推荐文章于 2025-05-03 18:39:16 发布

weixin_34272308

最新推荐文章于 2025-05-03 18:39:16 发布

阅读量251

点赞数

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000017269628

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

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


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

2. js懒加载函数

有几个重点:

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

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

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

getBoundingClientRect 和 clientHeight的关系

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

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

最后就是监听滚动事件了

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);

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