在网站运营中，页面加载速度和用户体验始终是核心关注点。图片作为网页内容的重要组成部分，往往也是影响页面加载速度的主要因素之一。一张高清大图能提升视觉效果，但过多的图片如果没有妥善处理，就会拖慢网站速度，让访客望而却步。
幸运的是，安企CMS为我们提供了非常便捷的图片懒加载（Lazy Load）功能，帮助我们有效解决这个问题。简单来说，图片懒加载就是让图片不再在页面一加载时就全部载入，而是当用户滚动页面，图片即将进入可见区域时才开始加载。这就像你翻阅一本厚厚的书，你只会翻开当前阅读的几页，而不是一下子把整本书都摊开。
为什么图片懒加载如此重要？
启用图片懒加载带来的好处是多方面的：
- 加快页面首次加载速度： 浏览器无需一次性加载所有图片资源，减少了初始请求数量和数据传输量，用户能更快看到页面的主要内容。
- 节约带宽资源： 对于那些可能永远不会滚动到页面底部的用户，其设备和服务器都不必传输那些未曾被浏览到的图片数据。
- 提升用户体验： 页面响应更快，用户在浏览内容时会感觉更流畅，减少了等待的焦虑感。
- 有利于SEO优化： 搜索引擎越来越重视页面加载速度，更快的网站加载速度有助于提升搜索排名。
安企CMS作为一个专注于提供高效、可定制的内容管理解决方案，并注重高并发性、安全性和扩展性的系统，自然深谙此道，并提供了内置的懒加载支持。
安企CMS如何支持图片懒加载？
在安企CMS中，实现图片懒加载其实非常简单。细心的你可能已经注意到，在处理文章内容时，安企CMS的文档详情标签（archiveDetail）提供了一个非常实用的 lazy 参数。这个参数专门用来处理内容（Content）字段中的图片。
文档中明确指出，Content 字段支持图片懒加载，只需要使用 lazy="data-src" 这样的标签即可。这意味着，当你在模板中输出文章的 Content 时，如果添加了这个 lazy 参数，系统会自动将 Content 内所有 <img> 标签的 src 属性替换成 data-src 属性。
例如，一张原本是 <img src="https://www.anqicms.com/uploads/image.webp" alt="示例图片"> 的图片，在经过 lazy="data-src" 处理后，会变成 <img data-src="https://www.anqicms.com/uploads/image.webp" alt="示例图片">。此时，浏览器不会立即加载这张图片，而是等待我们通过 JavaScript 来判断图片是否进入了可视区域，再将 data-src 的值重新赋值给 src，从而实现懒加载。
动手操作：启用图片懒加载
下面，我们一步步来完成懒加载的启用：
第一步：定位模板文件
通常，文章内容的显示模板会位于类似 {模型table}/detail.html 的路径下，例如 article/detail.html 或 product/detail.html。如果你不确定具体是哪个文件，可以在后台的“内容管理” -> “文档分类”或“内容模型”中查看对应分类或模型的“文档模板”设置。
找到你的文章详情页所使用的模板文件，例如，我们以 article/detail.html 为例。
第二步：修改 archiveDetail 标签
打开这个模板文件，找到用来输出文章内容的 archiveDetail 标签。它通常长这样：
{%- archiveDetail articleContent with name="Content" %}
{{articleContent|safe}}
我们需要在这个标签中添加 lazy="data-src" 参数，修改后会变成：
{%- archiveDetail articleContent with name="Content" lazy="data-src" %}
{{articleContent|safe}}
这里的 |safe 过滤器非常重要，它告诉模板引擎将 articleContent 变量作为安全的HTML内容输出，而不是进行转义。如果缺少这个，懒加载的 data-src 属性可能无法正常工作。
完成这一步后，文章内容中的所有图片 src 属性就已经被转换为 data-src 了。
第三步：引入懒加载 JavaScript 库
仅仅将 src 属性改为 data-src 是不够的，我们还需要一段 JavaScript 代码来监听页面滚动，并在图片进入可视区域时，将 data-src 的值“移回”到 src 属性。
你可以选择一个轻量级的懒加载库，比如 lazysizes.js，或者自己编写一个简单的脚本。为了演示，我们提供一个基于现代浏览器原生 Intersection Observer API 的简单脚本，你可以将其添加到你网站的公共头部或底部模板文件（例如 base.html）的 <script> 标签内，建议放在 </body> 标签之前，以确保DOM元素已经加载：
<script>
document.addEventListener("DOMContentLoaded", function() {
// 获取所有带有 data-src 属性的图片
let lazyImages = [].slice.call(document.querySelectorAll("img[data-src]"));
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
if (lazyImage.dataset.srcset) {
lazyImage.srcset = lazyImage.dataset.srcset;
}
lazyImage.removeAttribute("data-src");
lazyImage.removeAttribute("data-srcset");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// Fallback for older browsers (可选, 这里简化为直接加载)
lazyImages.forEach(function(lazyImage) {
lazyImage.src = lazyImage.dataset.src;
if (lazyImage.dataset.srcset) {
lazyImage.srcset = lazyImage.dataset.srcset;
}
lazyImage.removeAttribute("data-src");
lazyImage.removeAttribute("data-srcset");
});
}
});
</script>
第四步：可能需要的CSS样式（可选，但推荐）
为了避免图片加载时页面内容“抖动”（Layout Shift），建议为图片设置固定的宽度和高度，或者使用 CSS 预留图片位置。例如，你可以给图片添加一个最小高度：
img[data-src] {
min-height: 100px; /* 根据实际图片比例调整 */
display: block; /* 避免一些行内元素的默认行为 */
}
或者，在发布文章时，确保图片带有 width 和 height 属性。
结合其他优化手段，效果更佳
安企CMS在图片处理方面还提供了其他实用的功能，与懒加载配合使用，能让网站性能更上一层楼。你可以在后台的“内容设置”中找到它们：
- 是否启动Webp图片格式： 启用后，上传的 JPG、PNG 等图片会自动转换为体积更小的 WebP 格式，进一步减少图片大小。
- 是否自动压缩大图： 当你上传的图片尺寸过大时，系统可以自动将其压缩到指定宽度，有效节省存储空间和加载时间。
- 缩略图处理方式和尺寸： 网站可以根据前端需要，自动生成不同尺寸的缩略图，确保在列表页等地方加载的是合适大小的图片。
通过将图片懒加载与这些内置的图片优化功能结合起来，你的安企CMS网站将在加载速度和用户体验方面获得显著提升。
常见问题 (FAQ)
Q1: 我已经按照步骤在 archiveDetail 标签中添加了 lazy="data-src"，但图片似乎还是立即加载了，这是为什么？
A1: 最常见的原因是您可能忘记了在网站的模板中引入对应的 JavaScript 懒加载脚本，或者脚本没有正确运行。lazy="data-src" 只是将图片的 src 属性修改为 data-src，真正实现“懒”加载的机制需要 JavaScript 代码来监听这些 data-src 图片何时进入用户的可视区域，然后动态地将 data-src 的值重新赋值给 src。请仔细检查您的 base.html 或相关模板文件是否包含了正确的 JavaScript 懒加载脚本，并且确保脚本没有语法错误或被其他JS冲突阻止执行。
Q2: 启用图片懒加载会对网站的SEO产生负面影响吗？
A2: 恰恰相反，现代搜索引擎（尤其是Google）对图片懒加载持积极态度。正确实施的懒加载通常会对SEO产生积极影响。搜索引擎的爬虫现在通常能够执行JavaScript并识别 data-src 等属性。更快的页面加载速度、更优的用户体验（Core Web Vitals指标）本身就是重要的SEO排名因素。只要确保懒加载的图片内容仍然可被搜索引擎抓取和索引，并且没有出现JS错误导致图片无法加载，就没有问题。
Q3: 除了文章内容中的图片，我网站的其他图片（比如Banner图、缩略图）也能用这种方法懒加载吗？
A3: lazy="data-src" 这个参数是专门针对 archiveDetail 标签输出的 Content 字段中的图片进行处理的。对于网站中其他位置的图片