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

一,什么是懒加载?

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



方法一,使用三个相关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

真诚赞赏,手留余香
赞赏
随机推荐
Mint-ui 创建步骤
Vue函数式路由
MySQL导入csv文件
macOS开启usb调试Android真机
CentOS7 安装 LAMP 和 Mod Security 手记
CentOS 7 中,Apache 2.4 的 mod_evasive 无法正常工作,不能屏蔽IP
实现图片懒加载的两种方法
Wordpress 增加文章阅读次数或点赞次数(非插件实现)
jQuery Mobile 1.4.5 弹出框
创建Sprites雪碧图 精灵图