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

17-03-04 03:08 1954 0 已编辑

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

在使用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();    
做自己喜欢做的事。
Up骚年
Up骚年 站长 @ 十七度 创建者 17 声望
all or nothing, now or never.
0 人点赞
草芥 采集助手
0 条评论
排序方式 时间 投票
快来抢占一楼吧
请登录后发表评论