# 织梦cms文章内容图片延迟加载懒加载设置教程

*Published:* 2023-08-05
*Author:* 客服001

#### 温馨提醒

如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢

本文最后更新于2023年8月5日，已超过 180天没有更新



图片延迟加载的原理

图片延迟加载的原理就是先不设置img的src属性，等合适的时机（比如滚动、滑动等）在动态去给img的src属性！

图片延迟加载的好处

减少对服务器的请求，降低服务器的带宽

织梦文章内容图片延迟加载[懒加载](https://www.xarjtc.com/tag/%e6%87%92%e5%8a%a0%e8%bd%bd "查看懒加载此标签更多文章")

1、首先在head.htm模板文件中引入jquery和jquery.lazyload

```
<script src="jquery.min.js"></script>
<script src="jquery.lazyload.min.js"></script>
<script type="text/javascript">
    $(function() {
        $("img").lazyload({
            effect:"fadeIn"
          });
        });
</script>
```

2、其次打开included/extend.fuc.php，在最后面增加CimgUrl函数，下面域名部分为你的域名

```
function CimgUrl($newurl){
    $newurl = str_replace('src="/uploads/','class="lazy" data-original="https://www.hhymw.com/uploads/',$newurl);
    return $newurl;
}
```

模板调用：

```
{dede:field.body function='CimgUrl( me)'/}
```

也可以把PHP函数直接写到模板里面，模板调用：

```
​​​​​​​{dede:field.body function="str_replace('src="/uploads/','class="lazy"data-original="http://www.yoursite.com/uploads/', me)"/}
```