首屏优化图片懒加载

2018-12-05

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

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. 最后就是监听滚动事件了
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);

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

原文链接:segmentfault.com

上一篇:解决elementUI的穿梭框clearQuery方法无效
下一篇:闭包是...
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部