# 在使用JQuery.lazyload图片懒加载时，正则替换Img的src为original

**URL:** <https://www.shiqidu.com/t/topic/151>\
**Category:** 开发调优\
**Tags:** 正则表达式\
**Created:** [2017 年3 月 3 日 19:08 UTC](https://www.shiqidu.com/t/topic/151 "2017-03-03T19:08:57Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

作者： ![Leon](https://www.shiqidu.com/user_avatar/www.shiqidu.com/leon/32/5_2.png) [@Leon](https://www.shiqidu.com/u/Leon)\
发布日期： [2017 年3 月 3 日 19:08 UTC](https://www.shiqidu.com/t/topic/151/1 "2017-03-03T19:08:57Z")

</div>

在页面有很多大图的时候，为了用户体验和服务器的压力着想，我们通常会使用图片懒加载技术。

在使用lazyload做懒加载时，我们需要提前处理一下图片的src值，使之指向一个占位符图片的地址，把真实的图片路径赋给original，以便jquery.lazyload能正常执行。

**代码如下:**

```php
//处理前的图片    
$img = '<img src="/assets/ico_set.gif" alt="aa" title="ss" />';    
    
//处理后的图片    
$img = preg_replace('/<img(.+)src=['"]([^'"]+)['"](.*)>/i',"<img$1data-original="$2" src="grey.gif"$3>",$img);    

```

> grey.gif为占位图片

**结果如下:**

![图片真实地址赋给了original，src指向占位图](https://discourse.shiqidu.com/uploads_nj/article/2017-03-04/58b9bdc6f1f65.png)

然后就可以用lazyload懒加载了。

```javascript
//举例    
$(".container img").lazyload();    

```