图片懒加载（纯手写）-阿里云开发者社区

图片懒加载（纯手写）

2024-07-03 12

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 图片懒加载（纯手写）

什么是图片懒加载？

默认情况下不加载图片，直到滚动页面，图片进入浏览器窗口的可视区域，才加载图片！

图片懒加载效果预览

图片懒加载实现原理

图片默认的src属性为空，图片地址存放在data-src属性中，当图片进入可视区域，从data-src属性中取得图片地址，赋值给src属性完成图片的加载

图片懒加载的实现方案

全局监听浏览器滚动事件
滚动事件中判断是否有图片进入可视区域
若图片进入可视区域，则加载图片
加载图片的过程为：从data-src属性中取得图片地址，赋值给src属性

图片懒加载的完整范例代码

目录结构

index.html

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <div style="height: 1000px">
      <img src="./images/1.jpg" />
    </div>
    <div>
      <img class="lazy-element" data-src="./images/2.jpg" />
    </div>
    <div>
      <img class="lazy-element" data-src="./images/3.jpg" />
    </div>
    <div>
      <img class="lazy-element" data-src="./images/4.jpg" />
    </div>

    <script type="text/javascript" src="./lazy.js"></script>
  </body>
</html>

lazy.js

/*  
  图片懒加载的原理：
  图片默认的src属性为空，图片地址存放在data-src属性中
  >> 当图片进入可视区域
  - 从data-src属性中取得图片地址，赋值给src属性完成图片的加载

  图片懒加载的实现方案：
  1. 全局监听浏览器滚动事件
  2. 滚动事件中判断是否有图片进入可视区域
  3. 若图片进入可视区域，则加载图片
  4. 加载图片的过程为：从data-src属性中取得图片地址，赋值给src属性
 */

// 设定懒加载元素的样式名为 lazy-element
let lazyElementClassName = "lazy-element";

// 设定存储图片地址的属性为 data-src
let srcAttrName = "data-src";

// 定义变量--存储浏览器窗口的高度;
let _viewportHeight;
// 定义变量--存储浏览器窗口与页面顶部的距离;
let _pageYOffset;

//   更新浏览器窗口的高度
function setViewportHeight() {
  _viewportHeight =
    window.innerHeight ||
    document.documentElement.clientHeight ||
    document.body.clientHeight;
}

//   更新浏览器窗口与页面顶部的距离
function setPageYOffset() {
  _pageYOffset =
    window.pageYOffset ||
    window.scrollY ||
    document.documentElement.scrollTop ||
    document.body.scrollTop;
}

// 通过 getElementsByClassName 获取所有懒加载元素（数据类型为类似数组的HTMLCollection）
// 使用Array.prototype.slice.call方法将HTMLCollection转化为数组
let elements = Array.prototype.slice.call(
  document.getElementsByClassName(lazyElementClassName)
);

// 设定一个标记 —— 页面是否滚动（默认未滚动）
let initialized = false;

// 初始化浏览器窗口的高度
setViewportHeight();

// 全局监听浏览器滚动事件
window.onscroll = function () {
  // 浏览器滚动时，触发懒加载图片的检测
  scrollEventHandler();
  // 页面滚动时，更新浏览器窗口与页面顶部的距离
  setPageYOffset();
};

// 全局监听浏览器窗口大小改变事件
window.onresize = function () {
  //  浏览器窗口大小改变时，更新浏览器窗口的高度
  setViewportHeight();
};

function scrollEventHandler() {
  // 页面滚动时
  if (!initialized) {
    requestAnimationFrame(function update() {
      // 判断是否加载图片
      checkAvailable();
      // requestAnimationFrame 的回调函数只会被调用一次，如果希望每帧都执行，则每帧都需要调用
      requestAnimationFrame(update);
    });
  }
  // 滚动过后，标记为页面已滚动
  initialized = true;
}

// 判断是否加载图片
function checkAvailable() {
  for (let i = 0; i < elements.length; i++) {
    let el = elements[i];

    // 一旦检测发现进入可视区域
    if (checkElementIsInViewport(el)) {
      // 则加载图片
      loadElement(el);

      // 并将该元素踢出队列
      elements.splice(i--, 1);
    }
  }
}

// 判断元素是否进入可视区域
function checkElementIsInViewport(elem) {
  if (elem.getBoundingClientRect) {
    // getBoundingClientRect方法用于获取元素相对于视口左上方的位移;
    let elemPos = elem.getBoundingClientRect();

    // 元素与视口顶部的距离小于或等于视口高度时，元素进入可视区域
    if (elemPos.top && elemPos.top > 0 && elemPos.top <= _viewportHeight) {
      return true;
    }
    return false;
  } else {
    // 兼容不支持getBoundingClientRect的浏览器
    let offsetTop = getElemOffsetTop(elem);

    // 元素与页面顶部的距离小于或等于视口高度+视口顶部与页面顶部的距离时，元素进入可视区域
    if (
      offsetTop > _pageYOffset &&
      offsetTop < _pageYOffset + _viewportHeight
    ) {
      return true;
    }
    return false;
  }
}

// 获取元素与页面顶部的距离
function getElemOffsetTop(el) {
  let top = el.offsetTop;
  let parent = el.offsetParent;
  while (parent) {
    top += parent.offsetTop || 0;
    parent = parent.offsetParent;
  }
  return top;
}

// 加载图片: 从data-src属性中取得图片地址，赋值给src属性
function loadElement(elem) {
  let srcURL = elem.getAttribute(srcAttrName);
  elem.src = srcURL;
}