LazySizes：极致性能的懒加载解决方案
项目地址: https://gitcode.com/gh_mirrors/la/lazysizes LazySizes是一款高性能、SEO友好的懒加载库，专门用于处理响应式图片、iframe以及脚本等资源的延迟加载。它能够自动检测任何由用户交互、CSS或JavaScript触发的可见性变化，无需任何配置即可实现智能资源管理。
项目特点
LazySizes与其他懒加载器相比具有显著优势：
自动检测机制：无论元素是通过用户滚动、CSS动画还是任何JS行为（轮播、滑块、无限滚动、瀑布流等）变得可见，LazySizes都能自动识别并处理。
未来兼容性：直接支持标准的响应式图片语法（picture和srcset），无需额外配置。
关注点分离：为响应式图片支持添加自动sizes计算功能，以及媒体查询的别名功能。
卓越性能：基于高效的代码实践，在60fps下无卡顿运行，可在CSS和JS密集型页面或Web应用中使用数百个图片/iframe。
安装方法
通过npm安装
npm install lazysizes --save
通过Yarn安装
yarn add lazysizes
直接下载
从项目仓库下载最新版本的lazysizes.min.js文件。
使用方法
基本用法
在HTML中，为需要懒加载的元素添加lazyload类，并将原来的src属性改为data-src：
<!-- 非响应式图片 -->
<img data-src="image.jpg" class="lazyload" />
<!-- 响应式图片示例 -->
<img
data-sizes="auto"
data-srcset="image1.jpg 300w,
image2.jpg 600w,
image3.jpg 900w"
class="lazyload" />
<!-- iframe示例 -->
<iframe class="lazyload" data-src="https://www.example.com"></iframe>
响应式图片支持
LazySizes基于响应式图片标准构建，并扩展了额外功能。要获得完整的跨浏览器响应式图片支持，可以使用完整的polyfill，或者使用极轻量的部分respimg polyfill插件。
核心功能
智能预加载
LazySizes会预加载邻近视口的资源以改善用户体验，但仅在浏览器网络空闲时进行。
SEO优化
LazySizes不会对Google隐藏图片/资源。无论使用何种标记模式，Google不滚动/与网站交互，LazySizes会检测用户代理是否能够滚动，如果不能，立即显示所有图片。
插件系统
LazySizes提供了丰富的插件生态系统，可根据需要扩展功能：
-
respimg polyfill插件：为最重要的响应式图片子集提供极轻量的替代polyfill。
-
OPTIMUMX插件：为不同图像提供最佳像素密度控制。
-
parent-fit插件：扩展data-sizes="auto"功能，为高度和宽度受限的图像元素计算正确的sizes。
-
object-fit polyfill插件：在不支持object-fit属性的浏览器中进行polyfill。
配置选项
可以通过全局配置对象lazySizesConfig来设置选项：
window.lazySizesConfig = window.lazySizesConfig || {};
// 使用.lazy代替.lazyload
window.lazySizesConfig.lazyClass = 'lazy';
// 使用data-original代替data-src
window.lazySizesConfig.srcAttr = 'data-original';
// 页面针对快速onload事件进行优化
window.lazySizesConfig.loadMode = 1;
浏览器支持
LazySizes支持所有支持document.getElementsByClassName的浏览器（除IE8-外）。如果需要支持IE8，可以使用noscript扩展或修改后的noscript模式。
最佳实践
指定图片尺寸
为最小化重排和避免页面跳动，应在图片源本身加载之前让浏览器能够计算出图片的宽度和高度：
<img
style="width: 350px; height: 150px;"
data-srcset="image1.jpg 1x, image2.jpg 2x"
data-src="image.jpg"
class="lazyload" />
对于灵活的响应式图片，应使用CSS固有比率缩放技术。
性能优化建议
虽然懒加载是一个很好的功能，但对于用户来说，关键的是视口内的图片要尽可能快地加载。
通常将所有脚本合并为一个大型脚本并添加到页面底部是常见的做法，但为了感知性能，生成两个或多个脚本包可能更好：一个包含对内容或UI有重大影响的所有脚本的小包，以及包含页面正常行为的另一个较大包。
这个较小的脚本包应包含LazySizes及其所有插件，然后应放置在body末尾的任何其他阻塞元素之前，或者放在head中的任何阻塞元素之后，以尽可能快地加载关键内容。
LazySizes的设计使其能够以高频率调用，因此工作效率很高，可以挂接到各种事件中作为mutationobserver，意味着这个懒加载器可以作为一个简单的即插即用解决方案。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
