织梦图片懒加载代码添加位置

织梦文章页通常包含多张图片，首屏一次性加载全部图片会显著拖慢页面打开速度。图片懒加载通过延迟加载视口外的图片，可有效提升首屏渲染速度。本文详细说明在织梦模板中添加懒加载代码的准确位置与配置方法。

一、懒加载原理与添加位置总览

懒加载的核心是将真实图片地址暂存于 data-src 属性，src 指向占位图，当图片进入视口时再用 JS 将 data-src 赋值给 src。织梦中需要修改的位置有三处：

1. 文章内容模板（核心位置）

文件路径：/templets/default/article_article.htm，这是正文图片渲染的容器。

2. 列表页模板

文件路径：/templets/default/list_article.htm，列表缩略图同样需要懒加载。

3. 全站公共底部模板

文件路径：/templets/default/footer.htm，JS 脚本统一在此引入。

二、文章内容图片懒加载实现

步骤一：修改正文图片输出方式

织梦文章正文通过 {dede:field.body/} 输出，其中图片已包含完整 src。需要用 JS 在页面加载后批量转换：

// 在 article_article.htm 的正文容器后添加
<div class="article-content">{dede:field.body/}</div>

<script>
// 将正文内所有图片转换为懒加载格式
var imgs=document.querySelectorAll('.article-content img');
imgs.forEach(function(img){
  if(img.getAttribute('src') && !img.hasAttribute('data-src')){
    img.setAttribute('data-src', img.getAttribute('src'));
    img.setAttribute('src', '/images/blank.gif'); // 1x1透明占位图
    img.classList.add('lazyload');
  }
});
</script>

步骤二：在 footer.htm 引入懒加载核心脚本

推荐使用轻量级的 IntersectionObserver 方案，无需引入外部库：

// 在 footer.htm 的 </body> 前添加
<script>
function initLazyLoad(){
  if('IntersectionObserver' in window){
    var io=new IntersectionObserver(function(entries){
      entries.forEach(function(entry){
        if(entry.isIntersecting){
          var img=entry.target;
          if(img.dataset.src){
            img.src=img.dataset.src;
            img.removeAttribute('data-src');
            img.classList.remove('lazyload');
          }
          io.unobserve(img);
        }
      });
    }, { rootMargin: '200px 0px' });

    document.querySelectorAll('img.lazyload').forEach(function(img){
      io.observe(img);
    });
  }
}
document.addEventListener('DOMContentLoaded', initLazyLoad);
</script>

步骤三：列表页缩略图懒加载

列表页缩略图直接在模板标签中改写，避免依赖 JS 转换：

// list_article.htm 原始写法
<img src="[field:litpic/]" alt="[field:title/]">

// 改为懒加载写法
<img data-src="[field:litpic/]" 
     src="/images/blank.gif" 
     class="lazyload" 
     alt="[field:title/]">

三、占位图与样式配置

1. 生成透明占位图

// 用 PHP 生成 1x1 透明 GIF，保存为 /images/blank.gif
<?php
// base64 内联，无需额外文件
$data=base64_decode('R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
file_put_contents('images/blank.gif', $data);
?>

2. 添加加载占位样式

img.lazyload{
  background: #f0f0f0;
  transition: opacity 0.3s;
  opacity: 0;
}
img.lazyload.loaded{ opacity: 1; }

// JS 中加载完成后添加 loaded 类
img.onload=function(){
  this.classList.add('loaded');
};

3. 设置默认宽高防止布局抖动

.article-content img{
  width: 100%;
  height: auto;
  min-height: 200px; /* 占位期间预留高度 */
}

四、原生 loading 属性方案

现代浏览器支持原生 loading="lazy" 属性，无需 JS 即可实现懒加载。可在织梦内容保存时自动添加：

// 在 /dede/article_add.php 和 article_edit.php 中
// 对 body 内容的 img 标签自动添加 loading 属性
$body=preg_replace('/<img(?!.*loading=)/i', 
  '<img loading="lazy"', $body);

五、注意事项

搜索引擎蜘蛛不执行 JS，纯 JS 懒加载可能导致图片不被抓取索引。建议优先使用 loading="lazy" 原生方案，搜索引擎已支持解析该属性。若使用 JS 方案，可在 noscript 标签中提供真实图片作为降级。同时织梦生成静态 HTML 后，懒加载脚本需确保在静态页面中也被正确引用。

图片懒加载是织梦站点性能优化的高性价比手段，首屏图片请求数可减少 60% 以上。配合 CDN 加速和 WebP 格式转换，可进一步压缩图片体积。建议部署后通过 PageSpeed Insights 测试验证效果，根据实测数据调整 rootMargin 参数，找到加载时机与用户体验的最佳平衡点。