博客搭建 — 站点优化之图片懒加载

关于图片懒加载

图片懒加载是一种优化网页性能的技术,它延迟加载页面中的图片,只在用户需要时才进行加载,从而减少初始页面加载时的资源请求和传输量。

lazysizes 让该技术成为非常简单的实现策略。

在项目中使用 lazysizes

1、安装

npm install lazysizes --save

2、引入

import "lazysizes";
import "lazysizes/plugins/parent-fit/ls.parent-fit";

处理需要延迟加载的 Image 标签

  • lazyload 类添加到需要延迟加载的图片中
  • src 属性改为 data-src

为什么将 src 属性更改为 data-src?如果不更改属性,所有图片将立即加载,而不是延迟加载。
使用 data-src 不是浏览器识别的属性,浏览器遇到具有该属性的图片标签时不会加载图片。
这样做的好处是让 lazysizes 脚本决定何时加载图像,而不是由浏览器决定。

<img data-src="images.png" class="lazyload" />

怎样才算添加成功?

  • 滚动页面,打开控制台审查元素,找到添加了 lazyload 属性的图片,它们的类应该从 lazyload 改变为 lazyloaded。
  • 查看 Network 面板,点击 Img,当向下滚动时可以看到图片逐个加载。