海洋 CMS 图片懒加载功能如何开启

海洋 CMS 的图片懒加载没有后台一键开关，正确做法是改模板：把图片标签的 src 换成 data-src（保留一张小于 1KB 的占位图），再套用原生 loading="lazy" 或一段 IntersectionObserver 脚本，最后清一次模板缓存即可生效。懒加载是纯前端行为，由模板输出的 HTML 决定，与后台设置项无关，所以只能从模板层动手。

为什么海洋 CMS 后台找不到「图片懒加载」开关？

结论：懒加载由模板输出的 <img> 标签写法决定，不归后台系统设置管。

海洋 CMS（SeaCMS）是 PHP + MySQL 的影视/资讯站点建站系统，前台页面由 /template/你的模板名/ 目录下的 .html 模板文件渲染，图片地址来自模板里的标签调用。后台的「系统设置」负责站点名、域名、伪静态、缓存周期这类全局参数，不控制某个 img 怎么写。因此开启懒加载 = 改模板文件，这一步任何版本的海洋 CMS 都绕不开。

需要改的通常是这几个文件：列表页 list.html、首页 index.html、内容页 content.html、搜索页 search.html。

方案一：加原生 loading="lazy"（改动最小）

结论：给 <img> 加 loading="lazy" decoding="async" 两个属性即可，Chrome 77+、Firefox 75+、Safari 15.4+ 原生支持，不需要 JS。

操作步骤：

1. 通过后台「模板管理」或 FTP 进入 /template/当前模板名/，把上述模板文件下载到本地（先备份一份）。
2. 用编辑器全局替换 <img 为 <img loading="lazy" decoding="async" ，注意排除已经加过的标签，避免出现两个 loading。
3. 首屏的 Logo、播放器封面、详情页主图不要加，否则首屏会出现图片延迟出现的闪烁。
4. 上传覆盖原文件，后台清空模板缓存与 HTML 缓存。

注意点：如果模板是用 JS 拼接字符串动态插入图片的，这个属性不会被浏览器识别，得走方案二。

方案二：data-src + IntersectionObserver 怎么改

结论：把真实图片地址放进 data-src，用 IntersectionObserver 在图片距视口 200px 时再赋值给 src，老浏览器兼容性比原生属性更好。

模板改造：把原来输出图片地址的位置改成 data-src="图片地址"，src 固定为占位图。占位图建议用 1×1 透明 gif 或 300×400 灰色底图，体积控制在 1KB 以内。

<img class="lazy" src="/static/images/placeholder.gif" data-src="真实图片地址" alt="">
<script>
const io = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      const img = e.target;
      img.src = img.dataset.src;
      io.unobserve(img);
    }
  });
}, { rootMargin: '200px 0px', threshold: 0.01 });
document.querySelectorAll('img.lazy').forEach(img => io.observe(img));
</script>

这段脚本放在公共底部模板（如 footer.html）里，全站一次生效。IntersectionObserver 在 Chrome 51+、Safari 12.1+ 可用，IE 全系不支持，若站点还有 IE 流量需引入 w3c/IntersectionObserver 的 polyfill。

rootMargin: '200px 0px' 表示提前 200px 开始加载，避免用户快速滚动时看到白块；threshold: 0.01 表示元素露出 1% 就触发。

改完不生效怎么排查？

结论：按缓存 → 模板选中 → 请求时机三步查，基本能定位。

1. 确认后台模板管理里「当前模板」确实是你改的那个，切换过模板却没改对应目录是最高频的坑。
2. 清缓存：后台模板缓存 + HTML 静态缓存（若开启了静态生成）+ CDN 缓存，三处都要清。
3. 浏览器按 F12 打开 Network 面板筛选 Img，刷新页面：若首屏之外的图片在页面打开瞬间就被全部下载，说明 data-src 没生效，回头检查替换是否写到了另一个模板文件。
4. 播放页内嵌第三方播放器的封面图属于 iframe 内部资源，你改不了，也不影响自站图片的懒加载效果。

懒加载会影响 SEO 吗？

结论：用原生 loading="lazy" 对 SEO 无负面影响，用 data-src 方案时要给首屏和详情页主图留出正常加载。

百度、Google 对原生懒加载属性的抓取支持已经成熟。走 data-src 方案时，把首屏图、内容页主图排除在懒加载之外，可以避免图片被判定为加载失败或缺失。真正影响排名的从来不是懒加载本身，而是图片本身的体积——建议缩略图控制在 50KB 以内，并输出 width 和 height 属性防止布局抖动。

总结一下：海洋 CMS 开图片懒加载 = 改模板 + 加属性或脚本 + 清缓存。先备份模板，优先用原生 loading="lazy"，需要兼容老浏览器就用 IntersectionObserver 配 data-src，首屏图一律不参与懒加载。