Web性能优化之——图片懒加载(lazyload)

最新推荐文章于 2021-08-05 18:53:21 发布

Void骑士

最新推荐文章于 2021-08-05 18:53:21 发布

阅读量867

点赞数

分类专栏：前端性能优化 JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/return_MU/article/details/111771057

版权

本文介绍了图片懒加载的概念，即延迟加载非可视区域的图片，以提高网页性能。文章详细阐述了实现懒加载的三个步骤，并探讨了window.innerHeight、Element.getBoundingClientRect()和防抖函数throttle在其中的作用。通过理解这些技术和方法，读者可以自己实现一个简单的图片懒加载功能。

摘要由CSDN通过智能技术生成

一、什么是图片懒加载

图片懒加载，就是图片延迟加载。只加载页面可视区域上的图片，等滚动到页面下面时，再加载对应视口上的图片

二、懒加载的实现

图片的懒加载可以通过以下三个步骤实现

一开始不给img元素的src属性赋值，这样就不会加载图片元素了
当img元素出现在用户的浏览器视窗上，就给img的src属性赋值，加载图片
通过防抖函数减少用户反复滚动页面造成的性能浪费
如下图所示

在实现图片懒加载之前，我们需要先了解几个函数或属性

1、window.innerHeight

window.innerHeight属性，声明了窗口的文档显示区的高度和宽度，即当前可视区域的高度。
IE 不支持这些属性。它用 document.documentElement 或 document.body （与 IE 的版本相关）的 clientWidth 和 clientHeight 属性作为替代。

如下图
在这里插入图片描述

2、ELement.getBoundingClientRect()

getBoundingClientRect()用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。

如下图所示。
在这里插入图片描述

3、防抖函数throttle

防抖函数是为了减少在短时间内用户多次触发某事件而造成的性能浪费。例如最近流行的“重要的事情讲三遍遍遍”，其实只听第一次就够了，后面两次无疑会造成大脑的性能浪费。那要如何减少这种浪费呢？
解决的方案是我们可以设置一个定时器，在听到第一遍“重要的事”后，我们就开启定时器，让大脑放空两秒钟，期间对再次发来的消息充耳不闻，两秒钟后，再继续接收消息。

代码如下

// 节流函数 -- 第一个人说了算
function throttle(func, delay = 2000) {
   
    // func -- 重要的事情  delay -- 大脑放空时间
let timer = null
    
return function() {
   
let context = this // 保存上下文环境
let args = arguments // 保存参数

        if(!timer) {
   
            // 这是timer为null，说明是第一次听到"重要的事"
            func.apply(context, args)
            // 开始放空...
            timer = setTimeout(() => {
   
                // 两秒钟过了 停止放空
                clearTimeout(timer)
                // 注意setTimeout会返回一个id，因此要再次让timer为null
                timer = null
            }, delay)