如果做微信相关的开发,可能免不了要使用到取用户的头像。微信提供的多种取头像的方式,如下链接,是微信用户头像的原始链接;http://wx.qlogo.cn/mmopen/XYrRG5UShDeR5pkoC4ib0YibSSXr0bmqLAJhNdItlYAf6DNRKqk6AFMUn6OMPbE6qqYNP03n9saQbHdtXgByHsMQ/0。
但是这个头像占用空间比较大,有24KB,如果在列表中大量使用,会大大的增加页面加载资源的大小,影响用户的加载的速度。在列表中,其实没必要用那么大的图片,
即使在页面中显示时,也会进行宽高比的压缩。微信还提供另外几种不同大小的头像的获取方式。
用户头像,最后一个数值代表正方形头像大小(有0、46、64、96、132数值可选,0代表640*640正方形头像),用户没有头像时该项为空。若用户更换头像,
原有头像URL将失效。
1. .rankMenu img的头像全部都是微信的头像,先不加载原始头像,把img的src修改为随便设置一个属性,本例是修改为isrc。然后,将该头像的src赋值为isrc的值,并且将/0修改为你想要的格式。
<div class="headimg">
<img isrc="<%=self.getHeadimgurl()%>" />
</div>
$(".rankMenu img").attr(‘src‘, function(){
return $(this).attr(‘isrc‘).replace(/\/0$/, ‘/46‘);
});
2.headimg img的头像,既有微信的头像,又有其他非微信的头像,需要先做一下判断,作为区分。
if(($(".headimg img").attr("isrc")).indexOf("http://wx.qlogo.cn")==0){
$(".headimg img").attr(‘src‘, function(){
return $(this).attr(‘isrc‘).replace(/\/0$/, ‘/64‘);
});
}else{
$(".headimg img").attr(‘src‘, function(){
return $(this).attr(‘isrc‘);
});
}