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

17-03-04 03:08 字数 268 阅读 2198 已编辑

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

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

代码如下:

//处理前的图片    
$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指向占位图

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

//举例    
$(".container img").lazyload();    
0人点赞>
关注 收藏 改进 举报
0 条评论
排序方式 时间 投票
快来抢占一楼吧
请登录后发表评论
站长 @ 十七度
文章
304
粉丝
18
喜欢
140
收藏
22
排名 : 1
访问 : 53.74万
私信