使用成熟的插件（最推荐，最简单）
对于大多数用户来说，使用现成的插件是最高效、最安全的方式,因为它已经处理了各种兼容性和细节问题。
（图片来源网络，侵删）
推荐插件：dedeimglazyload
这是一个专门为 DedeCMS 开发的图片延迟加载插件,使用非常方便。
操作步骤：
-
下载插件
- 在网上搜索 "DedeCMS 图片延迟加载插件
dedeimglazyload"，您可以在 DedeCMS 官方论坛、一些技术博客（如模板王、织梦58等）或 GitHub 上找到下载资源。 - 下载后，您会得到一个压缩包，里面通常包含一个
imglazyload.php文件。
- 在网上搜索 "DedeCMS 图片延迟加载插件
-
上传并安装插件
（图片来源网络，侵删）- 登录您的 DedeCMS 后台。
- 进入“系统” -> “插件管理” -> “上传新插件”。
- 将下载的
imglazyload.php文件上传并安装。 - 安装成功后，在“插件管理”列表中找到该插件，点击“启用”。
-
修改模板文件
- 插件启用后，它会自动提供一个代码片段,您需要将其添加到模板文件中。
- 登录 DedeCMS 后台，进入“模板” -> “模板管理”。
- 找到您当前正在使用的模板（
default），然后修改以下核心模板文件：index.htm(首页)list_article.htm(列表页)article_article.htm(文章内容页)search.htm(搜索页)- 以及任何其他您希望应用延迟加载的页面模板。
- 在这些模板文件的
<head>标签内（通常是顶部），添加以下代码：{dede:global.cfg_replaceurl/} <script language="javascript" type="text/javascript" src="{dede:global.cfg_cmspath/}/include/dedeimglazyload.js"></script> - 注意：如果您的插件文件名不是
dedeimglazyload.js，请相应修改src路径。
-
修改文章内容页中的
<img>- 这是关键的一步，插件需要通过修改
<img>标签来添加一个占位图和data-original属性。 - 打开
article_article.htm文件。 - 找到调用文章正文的代码，它通常是这样的：
{dede:field.body/} - 将其替换为以下代码：
{dede:field.body function='replaceurl(@me)'/} - 这个
replaceurl函数就是插件的核心，它会自动解析文章内容中的<img>标签，将src属性的值移到data-original属性，并给src赋一个占位图（通常是 1x1 像素的透明 GIF）。
- 这是关键的一步，插件需要通过修改
-
设置占位图（可选）
有些插件允许您自定义占位图，您可以在后台的插件设置中找到相关选项，上传一个本地的占位图（例如一个灰色的背景图），这样在图片加载前会显示一个灰色方块,体验比空白好。
（图片来源网络，侵删） -
清除缓存
- 修改完模板后，务必在后台“系统” -> “一键更新网站” -> “更新HTML” -> “更新所有”（或仅更新您修改过的页面），并勾选“更新文档HTML”和“更新主页”。
- 在浏览器中按
Ctrl + F5强制刷新页面,确保加载的是最新的文件。
完成以上步骤后,您的网站图片就实现了延迟加载。
手动修改模板（最灵活，需要一定代码能力）
如果您不想使用插件，或者想自己控制所有细节,可以手动实现。
实现原理：
- 在模板中引入 jQuery 库（如果网站未引入）。
- 引入一个成熟的延迟加载 JS 库，如
echo.js或lazyload.js。 - 修改模板中的
<img>标签，为其添加data-src或data-original属性。 - 在页面底部写一小段 JS 代码来初始化延迟加载效果。
操作步骤：
-
准备 JS 库
- 下载
echo.js或jquery.lazyload.js，这里以echo.js为例,它更轻量且易于使用。 - 将下载的 JS 文件（
echo.min.js）上传到您网站的/js/目录下。
- 下载
-
修改模板文件
-
同样，需要修改
index.htm,list_article.htm,article_article.htm等模板。 -
第一步：在
<head>中引入 JS 库<!-- 如果网站没有jQuery，需要先引入jQuery --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- 引入echo.js --> <script src="{dede:global.cfg_cmspath/}/js/echo.min.js"></script> -
第二步：修改文章正文标签
- 打开
article_article.htm。 - 将
{dede:field.body/}替换为自定义的函数调用，您需要修改/include/extend.func.php文件来添加这个函数。 - 在
/include/extend.func.php文件的最后?>之前添加以下代码：// 文章内容图片延迟加载处理 function replaceurl($body) { $body = str_replace('<img src=', '<img class="lazy" data-src=', $body); return $body; } - 然后在
article_article.htm中使用：{dede:field.body function='replaceurl(@me)'/} - 注意：这种方法会为所有文章图片都加上
class="lazy"和data-src，如果您只想对特定图片生效,需要更复杂的逻辑。
- 打开
-
第三步：初始化延迟加载
- 在模板文件的底部，
</body>标签之前，添加以下 JS 代码：<script> echo.init({ offset: 100, // 视图底部偏移量，当图片进入视图 100px 时开始加载 throttle: 250, // 节流，每 250ms 执行一次检查 unload: false // 是否卸载已加载的图片 }); </script>echo.js会自动查找所有带有class="lazy"和data-src属性的<img>标签，并在它们进入视口时，将data-src的值赋给src属性,从而触发图片加载。
- 在模板文件的底部，
-
-
清除缓存
同样，在后台“一键更新网站”,并强制刷新浏览器。
修改编辑器默认插入代码（治本方法）
这个方法与前两种不同，它从源头上解决问题，当编辑器插入图片时,直接插入带有延迟加载属性的代码。
操作步骤：
-
找到编辑器配置文件
- DedeCMS 通常使用
kindeditor或ckeditor作为编辑器，配置文件通常位于/include/ckeditor/或/include/kindeditor/目录下。 - 以
kindeditor为例，找到kindeditor.js或kindeditor-min.js。
- DedeCMS 通常使用
-
修改图片上传代码
- 这个操作比较复杂，需要一定的 JavaScript 知识,您需要找到处理图片插入到编辑器中的函数。
- 在插入
<img>标签的地方，修改代码，使其默认生成类似这样的 HTML：<img src="占位图路径" data-original="真实图片路径" class="lazy" />
- 这种方法需要对代码进行深度定制，且在 DedeCMS 升级时可能会被覆盖,因此不推荐普通用户尝试。
总结与建议
| 方法 | 优点 | 缺点 | 推荐人群 |
|---|---|---|---|
| 插件 | 简单、快捷、安全，功能稳定，有详细文档 | 灵活性稍差，依赖第三方插件 | 所有用户，特别是新手 |
| 手动修改 | 灵活、可控，不依赖插件，可以自定义 JS 库 | 需要修改 PHP 和 HTML 文件，有一定技术门槛，升级网站时可能失效 | 有一定开发基础，希望完全掌控代码的用户 |
| 修改编辑器 | 从源头解决问题，所有新插入的图片都自动生效 | 修改复杂，容易在升级时丢失，维护成本高 | 追求极致，且有专门技术维护的开发团队 |
给您的最终建议：
直接使用方法一（插件），这是最省心、最可靠的方式，能以最小的成本实现图片延迟加载，完全满足绝大多数网站的需求，如果您在插件使用中遇到任何问题,可以随时提问。
