一、懒加载介绍

懒加载原理： 图片进入可视区域之后再去请求图片资源。

图片是在img标签有src属性才去加载的。

懒加载的原理就是在图片进入可视化区域之后，动态的去设置img标签中的src属性。如果在可视区域之外的图片的img中的src属性已被提前设置，那么就不是懒加载了，而是所有图片都会被加载。
在图片进入可视化区域之前，img标签上的src属性并没有被设置。在img标签上有一个data-url属性。该属性的值存放着图片的真实请求地址，但是由于src属性上并没有值，所以图片并不会被加载。我们的js可以监听scroll事件，在计算到图片进入可视区域之后。就拿到img标签上的data-url属性的值，把它设置到src属性上，这就是懒加载的一个原理。

图片懒加载的优势：

对于电商等图片很多，页面很长的业务场景适用
减少无效资源的加载：比如我们的页面有100张图片，但是用户往下滑动看的时候只看了十张图片。如果我们把这100张图片全部都加载完成，页面上会有很多的浪费。所以就可以使用懒加载，图片进入可视区域之后再去加载。
并发加载的资源过多会阻塞js的加载，影响网站的正常使用。因为浏览器会限制在一个域名下并发请求的数量。如果前边图片加载数量过多，要发送http请求，就会影响到后边js的并发加载，影响到页面中js逻辑的使用（JS文件一般放在页面底部）。使用图片懒加载可以避免这个问题。

二、代码

使用一张loading图片占位

<img src="./img2/loading.jpg" class="lazyload-img" data-url="./img2/11.jpg">
<img src="./img2/loading.jpg" class="lazyload-img" data-url="./img2/12.jpg">
<img src="./img2/loading.jpg" class="lazyload-img" data-url="./img2/13.jpg">
<img src="./img2/loading.jpg" class="lazyload-img" data-url="./img2/14.jpg">
<img src="./img2/loading.jpg" class="lazyload-img" data-url="./img2/15.jpg">
<img src="./img2/loading.jpg" class="lazyload-img" data-url="./img2/16.jpg">

let viewport = document.documentElement;
let imgArr = [].slice.call(document.querySelectorAll('.lazyload-img'));// 该函数用来判断某一个元素是否在可视区域
function isVisible(element) {let rect = element.getBoundingClientRect();// 用户不管是从上向下、从下向上、从左向右、从右向左滑动，都可以判断当前元素是否在可视区域return rect.top < viewport.clientHeight && rect.bottom > 0 && rect.left < viewport.clientWidth && rect.right > 0;
}// 该函数动态设置图片的src属性，动态加载图片
function lazyloadImg() {for (let i = 0; i < imgArr.length; i++) {let img = imgArr[i];if (isVisible(img)) {img.src = img.getAttribute('data-url');imgArr.splice(i,1);i--;}}
}// 一开始先执行一次，把在第一次进入页面时在可视区域的图片加载出来
lazyloadImg();let timer = null;
document.addEventListener('scroll',function () {// 一个简单的防抖处理if (timer) clearTimeout(timer);timer = setTimeout(() => {// 页面滚动的时候，不断有新的图片进入可视区域，此时再调用lazyloadImg函数lazyloadImg();},100);
})

下面对上述JS代码进行解释：

1、document.documentElement

document.documentElement 属性返回当前文档的根元素节点（root）。HTML网页的该属性一般是<html>节点。

document.documentElement的clientHeight属性，返回当前视口的高度（即浏览器窗口的高度，不包括滚动条）。

document.documentElement的clientWidth属性，返回当前视口的宽度（即浏览器窗口的宽度，不包括滚动条）。

另外，window.innerHeight 和 window.innerWidth 属性，也会返回网页在当前窗口中可见部分的高度和宽度，即“视口”（viewport）的大小（单位像素）。但是这两个属性值包括滚动条的高度和宽度。

2、getBoundingClientRect()

getBoundingClientRect方法（所有的元素结点上都有这个方法）返回一个对象，提供当前元素节点的大小、位置等信息，基本上就是 CSS 盒状模型的所有信息。

var rect = obj.getBoundingClientRect();

getBoundingClientRect方法返回的rect对象，具有以下属性（全部为只读）。

x：元素左上角相对于视口的横坐标
y：元素左上角相对于视口的纵坐标
height：元素高度
width：元素宽度
left：元素左上角相对于视口的横坐标，与x属性相等
right：元素右边界相对于视口的横坐标（等于x + width）
top：元素顶部相对于视口的纵坐标，与y属性相等
bottom：元素底部相对于视口的纵坐标（等于y + height）

由于元素相对于视口（viewport）的位置，会随着页面滚动变化，因此表示位置的四个属性值，都不是固定不变的。

注意，getBoundingClientRect方法的所有属性，都把边框（border属性）算作元素的一部分。也就是说，都是从边框外缘的各个点来计算。因此，width和height包括了元素本身 + padding + border。

前端学习交流QQ群，群内学习讨论的氛围很好，大佬云集，期待您的加入：862748629 点击加入

JS实现图片的懒加载相关推荐

如何使用echo.js实现图片的懒加载（整理）
如何使用echo.js实现图片的懒加载(整理) 一.总结一句话总结:a.在img标签中添加data-echo属性加载真实图片:<img class="loading" sr ...
【JavaScript】图片的懒加载
[JavaScript]图片的懒加载文章目录 [JavaScript]图片的懒加载 1. 懒加载 2. 利用`scroll`事件利用`HTMLElement.offsetTop` 利用`Eleme ...
图片的懒加载和预加载？
一.写在前面图片的懒加载和图片的预加载都是前端性能优化的一个方案,当然可能存在不同的应用场景,下面我们将总结一下这两个方案. 二.图片懒加载图片的懒加载是什么? 图片的懒加载指的是在长网页中延迟加 ...
图片的懒加载是怎么实现的
图片的懒加载是怎么实现的为什么要使用懒加载? 对页面加载速度影响最大的就是图片,一张普通的图片可以达到几M的大小,而代码也许就只有几十KB.当页面图片很多时,页面的加载速度缓慢,几S钟内页面没有加载 ...
jquery 当页面图片加载之后_图片的懒加载和预加载
一.懒加载 [1.1]什么是懒加载? 懒加载也就是延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式.当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1 ...
图片的懒加载与预加载
懒加载懒加载:也叫延迟加载,指的是在长网页中延迟加载图片的时机,当用户需要访问时,再去加载,这样可以提高网站的首屏加载速度,提升用户的体验,并且可以减少服务器的压力. 懒加载的实现原理是:将页面上图 ...
js原生实现高性能懒加载(分步解析)
小弟不才,自己做了一个简单的懒加载,为了节约 window.onscroll的次数 ,提高性能, 设计了函数节流和函数防抖两种模式 , 后面想到更好的方法会更新,也请各位朋友多多指点!! :D 废话不 ...
JS 实现图片的预加载（转载）
图片预加载是web开发中一种应用相当广泛的技术,比如我们在做图片翻转显示等特效的时候,为了让图片在转换的时候不出现等待,我们最好是先让图片下载到本地,然后在继续执行后续的操作. 下面的函数实现了一个我 ...
js图片懒加载的第二种方式
这种方式是图片按照顺序一张一张的加载直到所有图片都加载完成 html 同样的要让图片进行懒加载,路径引用就得用 data-src <ul><li><img data-sr ...
js实现审批流_小程序瀑布流组件:支持翻页与图片懒加载
电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重复一次逻辑,作为程序员,肯定是非常不愿意的. 瀑布流的形式都是大同小异,不同的是瀑布流中每个模块的内容,随业务而变化. 所以,我们把瀑布流框 ...

JS实现图片的懒加载

一、懒加载介绍

二、代码

1、document.documentElement

2、getBoundingClientRect()

JS实现图片的懒加载相关推荐

最新文章

热门文章