首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >JavaScript实现图片懒加载(lazyload)

JavaScript实现图片懒加载(lazyload)

原创
作者头像
伯爵
修改于 2019-10-24 06:33:31
修改于 2019-10-24 06:33:31
1.1K0
举报
文章被收录于专栏:前端小菜鸟前端小菜鸟

图片懒加载可以减少不必要的图片资源请求,提高页面的加载速度,提升用户体验。我们实现页面懒加载的方案一般有三种方式:

  • 获取元素clientHeight等位置信息
  • Element.getBoundingClientRect()
  • IntersectionObserver

我们先写HTML的DOM结构:

代码语言:txt
AI代码解释
复制
<style>
ul, li {
    margin: 0px;
    list-style: none;
}
li {
    height: 500px;
}
img {
    width: 1000px;
    height: 100%;
}

</style>

<ul id="lazyload">
    <li>
        <img data-src="./images/1.png" alt="loading">
    </li>
    <li>
        <img data-src="./images/2.png" alt="loading">
    </li>
    <li>
        <img data-src="./images/3.png" alt="loading">
    </li>
    <li>
        <img data-src="./images/4.png" alt="loading">
    </li>
    <li>
        <img data-src="./images/5.png" alt="loading">
    </li>
    <li>
        <img data-src="./images/6.png" alt="loading">
    </li>
    <li>
        <img data-src="./images/7.png" alt="loading">
    </li>
    <li>
        <img data-src="./images/8.png" alt="loading">
    </li>
</ul>

完全加载

在懒加载优化之前,我们使用全部加载的伪代码,根据islazyLoadBool()方法判断对应的懒加载逻辑。在实际开发过程中回去涉及到节流请求等操作。

代码语言:txt
AI代码解释
复制
let imgList = document.querySelectorAll('#lazyload img') || [];
let clientHeight = window.innerHeight;
loadimgListener();
window.onscroll = this.loadimgListener;

//图片加载监听器
function loadimgListener() {
  Array.from(imgList).forEach(dom => {
    islazyLoadBool(dom) && loadImg(dom);
  })
}

//加载图片
function loadImg(img) {
    if(!img || img.src) return;
    img.src = img.getAttribute('data-src');
}

function islazyLoadBool(dom) {
    return true; //TODO:懒加载核心:判断加载
}

clientHeight,offsetTop,scrollTop等位置信息

我们首先了解常见的DOM元素位置属性:

代码语言:txt
AI代码解释
复制
let dom = document.body;

dom.clientHeight; //可见区域高度
dom.clientTop; //可见区域左边距
dom.offsetHeight; //可见区域左边距-带边框
dom.scrollTop;// 被隐藏的顶部
window.screen.height // 屏幕高度

我们的核心是根据图片的位置判断是否加载:

代码语言:txt
AI代码解释
复制
//判断加载
function islazyLoadBool(dom) {
  let imgTop = dom.offsetTop; //获取响度浏览器可视区的高度
  let srcollTop = document.documentElement.scrollTop || document.body.scrollTop; 
  return imgTop <= clientHeight + srcollTop ;
}

Element.getBoundingClientRect()

Element.getBoundingClientRect() 返回一个DOMRect对象,包含了描述元素的位置属性:left,right,top,bottom。rectObject = object.getBoundingClientRect();

我们可以使用定时器或者scroll事件,在回调函数调用元素的getBoundingClientRect()方法,获取元素的位置。

代码语言:txt
AI代码解释
复制
//懒加载核心:判断加载
function islazyLoadBool(dom) {
  let imgTop = dom.getBoundingClientRect().top; //获取响度浏览器可视区的高度
  let srcollTop = document.documentElement.scrollTop || document.body.scrollTop; 
  return imgTop <= clientHeight + 100 ;
}

因为getBoundingClientRect()会强制重新计算元素布局,所以这个方法存在一定的性能隐患,不建议使用。

IntersectionObserver

IntersectionObserver 提供异步接口监听目标元素与其祖先元素(或者视窗viewport),

IntersectionObserver API 可以用来实现图片懒加载功能,在不支持该API的浏览器使用 polyfill

代码语言:txt
AI代码解释
复制
// 加载图片
function loadImg(ele) {
    let target = ele && ele.target;
    target.src = target.dataset.src;
    console.log(target.src)
}

function callback (arr) {
    arr.forEach(item => {
        if(item.isIntersecting) {
            loadImg(item);
            io.unobserve(item.target)
        }
    })
}

var io = new IntersectionObserver(callback);

let imgs = document.querySelectorAll('img');
imgs.forEach(item => {
    io.observe(item);
})

参考

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
前端面试HTML相关(一)
clientTop,offsetTop,clientHeight 以及 scrollTop 等各种距离高度做对比,利用scroll事件,节流判断图片的位置;
用户7572539
2022/11/21
3000
前端面试HTML相关(一)
Vue.js的图片加载性能优化你可以试试
图片加载优化对于一个网站性能好坏起着至关重要的作用。所以我们使用Vue来操作一波。
Vam的金豆之路
2021/11/30
1.9K0
彻底玩转图片懒加载及底层实现原理
图片懒加载其实已经是一个近乎“烂大街”的词语了,在大大小小的面试中也会被频繁的问到,我在之前的面试中也被问到了图片懒加载的原因、实现方式及底层原理,但由于自己平时很少做“图片”相关的处理,对于“懒加载”也是知之甚少,所以在面试中问答的也不是很好。
前端森林
2021/02/03
1K0
彻底玩转图片懒加载及底层实现原理
图片懒加载实现方式
图片作为前端开发中不可或缺的元素,其加载速度对用户体验有着重要影响。然而,大量的图片加载不仅会消耗用户流量,还会导致页面加载缓慢,影响用户体验。为了解决这个问题,图片懒加载技术应运而生
iwhao
2024/08/07
1990
图片懒加载实现方式
关于图片懒加载的几种方案
clientTop,offsetTop,clientHeight 以及 scrollTop 各种关于图片的高度作比对
夜尽天明
2019/12/06
1K0
原生 JS 实现最简单的图片懒加载
懒加载其实就是延迟加载,是一种对网页性能优化可方式,比如当访问一个页面的时候,优先显示可视区域的图片而不一次性加载所有图片,当需要显示的时候再发送图片请求,避免打开网页时加载过多资源。
青梅煮码
2023/03/13
3.3K0
原生 JS 实现最简单的图片懒加载
图片懒加载原理及实现(java懒加载原理)
懒加载是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片而不是一次性加载所有图片,当需要显示时,再发送图片请求,避免打开网页时加载过多资源。 当一个网站的加载图片过多时就需要懒加载的协助,页面图片多时,在首次载入时一次性加载会耗费时间长,使用懒加载可以使页面加载速度快、减轻服务器的压力、节省流量。 如下图:
全栈程序员站长
2022/08/01
1.9K0
图片懒加载原理及实现(java懒加载原理)
图片懒加载
获取元素距离可视区域顶部的高度需要通过getBoundingClientRect() API 来实现,getBoundingClientRect() 获取的是 DOM 元素相对于窗口的坐标集合,集合中有多个属性,其中的 top 属性就是当前元素元素距离窗口可视区域顶部的距离
心安事随
2024/05/27
4270
图片懒加载
前端-原生JS实现最简单的图片懒加载
懒加载其实就是延迟加载,是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片而不一次性加载所有图片,当需要显示的时候再发送图片请求,避免打开网页时加载过多资源。
grain先森
2019/03/29
5.4K0
前端-原生JS实现最简单的图片懒加载
图片懒加载的几种实现方式
Lazyload 可以加快网页访问速度,减少请求,实现思路就是判断图片元素是否可见来决定是否加载图片。当图片位于浏览器视口 (viewport) 中时,动态设置 <img> 标签的 src 属性,浏览器会根据 src 属性发送请求加载图片。
李振
2021/11/26
2.8K0
图片懒加载的几种实现方式
实现一个Vue自定义指令懒加载
当我们向下滚动的时候图片资源才被请求到,这也就是我们本次要实现的效果,进入页面的时候,只请求可视区域的图片资源这也就是懒加载。
木子星兮
2020/07/17
1K0
实现一个Vue自定义指令懒加载
实现图片懒加载
Web 图片的懒加载就是通过读取img元素,然后获得img元素的data-src(也可以约定为其他属性名)属性的值,并赋予img的src,从而实现动态加载图片的机制。 这里需要注意的是: img在初始化的时候不要设置src属性,因为即使设置 src='' 浏览器也会尝试加载图片。 一个简单的图片懒加载共涉及两个方面, 1. HTML 约定 我们首先需要给准备实施懒加载的img元素添加指定的class 这里为m-lazyload ,同时将img src赋值给 data-src属性。 具体示例为: <img c
吴裕超
2018/02/28
1.6K0
实现图片懒加载(及优化相关)
工作之余想要休闲一下(看-美-女-图),但是又觉得单纯休闲不利于自身进步,于是 ……
全栈程序员站长
2022/07/22
1.3K0
实现图片懒加载(及优化相关)
JavaScript实现图片懒加载
1、 将图片真实路径赋值到img标签的data-src属性中,而不是src属性 2、 获取img节点距离浏览器顶部的距离,如果小于或等于浏览器窗口的可视高度,那么就将data-src的值赋值到src里去
Javanx
2019/09/04
9370
【JS】322- 手把手教你实现前端惰性加载
在实际的项目开发中,我遇到了一个这样的需求:一个页面模块有很多列表数据展示,每条数据都带有图片,而首次展示的图片只需要不到10张,那么我们还要一次性把所有图片都加载出来吗?显然这是不对的,不仅影响页面渲染速度,还浪费带宽(因为需要对列表进行拖动排序,需加载出全部列表,不能做分页)。我们可以在浏览器滚动到一定的位置的时候进行下载,这也就是们通常所说的惰性加载,技术上现实其中要用的技术就是图片懒加载--到可视区域再加载。
pingan8787
2019/08/20
1.1K0
【JS】322- 手把手教你实现前端惰性加载
掌握Intersection Observer API,轻松实现实现图片懒加载、元素滚动动画、无限滚动加载等功能
Intersection Observer API 是浏览器提供的一个强大接口,用来异步观察一个元素是否进入(或者离开)另一个元素或视口(viewport)的可视范围。
watermelo37
2025/04/22
2240
掌握Intersection Observer API,轻松实现实现图片懒加载、元素滚动动画、无限滚动加载等功能
面试官:“只会这一种懒加载实现思路?回去等通知吧”
同样的思路下面还有另一种实现方式,是用 offsetTop、scrollTop、innerHeight做的,这个很常见,我们就不说了。
winty
2024/01/03
3410
面试官:“只会这一种懒加载实现思路?回去等通知吧”
VUI创建日志(一)——图片懒加载指令的实现
滚动监听,不断滚动便会不断触发滚动监听的函数,影响性能,因此在此需要加入一个防抖函数
小皮咖
2019/11/05
6780
图片懒加载的原理
对于一些资源文件(图片等),只有真正用到的时候才去加载它(发请求),在这之前用体积更小的占位图替代。这么一来就为用户节省了不必要的流量开销。
kyrieliu
2020/07/01
7880
图片懒加载的原理
元素滚动高度和图片懒加载
首先转载两篇文章 JS中height、clientHeight、scrollHeight、offsetHeight区别 关于scrollTop,offsetTop,scrollLeft,offsetLeft用法介绍
bamboo
2019/01/29
1.8K0
元素滚动高度和图片懒加载
相关推荐
前端面试HTML相关(一)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档