实现图片懒加载的两种方法

一,什么是懒加载?

一般情况下,当一个页面加载以后,图片也会开始全部加载,这样会增加客户端和服务器的压力。为了减轻负担,让图片先出现在浏览器视口以后再进行加载。



方法一,使用三个相关API:

1,获取可视区域的高度 document.documentElement.clientHeight

2,获取元素到文档顶部的高度 element.offsetTop

3,获取浏览器窗口顶部与文档顶部之间的距 document.documentElement.scrollTop


var imgs = document.querySelectorAll('.lazyload-img');


//循环获取直到页面顶部的高度
function getElementTop(element) {
    var actualTop = element.offsetTop;
    var current = element.offsetParent;
    while(current !== null) {
        actualTop += current.offsetTop;
        current = current.offsetParent;
    }
    return actualTop;
}


function lazyLoad(imgs) {
    var vh = document.documentElement.clientHeight;
    var st = document.documentElement.scrollTop || document.body.scrollTop;
    imgs.forEach((item, index) => {
        if (vh + st > getElementTop(imgs[index])) {
            imgs[index].src = imgs[index].getAttribute('data-src');
        }
    });
}


window.onload = window.onscroll = function () {
    lazyLoad(imgs);
}



方法二,使用一个相关API

getBoundingClientRect() //获取元素的大小及位置

{
  bottom: 667.515625
  height: 117.5
  left: 269.046875
  right: 489.9375
  top: 550.015625
  width: 220.890625
  x: 269.046875
  y: 550.015625
}


滚动条向下滚动的时候,bound.top值会越来越小,也就是图片到可视区顶部的距离也越来越小,所以当bound.top == clientHeight时,说明土片马上就要进入可视区了,即 bound.top<=clientHeight时,图片是在可视区域内的。


var imgs = document.querySelectorAll('.lazyload-img');

function lazyLoad() {
  imgs.forEach(function(el){
    var bound = el.getBoundingClientRect();
    if(bound.top <= window.innerHeight){
      console.log("el: ", el);
      el.src = el.dataset.src;
    }
  })
}

window.onload = window.onscroll = function () {
  lazyLoad();
}



修改时间 2021-07-02

真诚赞赏,手留余香
赞赏
随机推荐
Parameter 一个轻量的 Node.js 数据验证工具
Photoshop CC 2018中如何设置19号笔刷
Cheerio 中文文档
PHP文件上传进度:使用 Session 的 upload_progress
Naxsi 白名单设置
通过JS语句判断WEB网站的访问端是电脑还是手机
Workerman 实现 WebSocket IM 聊天系统【后端篇】
JavaScript 数据验证模块 joi validator
Vue 3.0 快速教程
Electron 简介