首页 > 微信学院 > 微信公众平台开发 >

微信头像的灵活使用

2015-09-23

如果做微信相关的开发,可能免不了要使用到取用户的头像。微信提供的多种取头像的方式,如下链接,是微信用户头像的原始链接;http: wx qlogo cn mmopen XYrRG5UShDeR5pkoC4ib0YibSSXr0bmqLAJhNdItlYAf6D

如果做微信相关的开发,可能免不了要使用到取用户的头像。微信提供的多种取头像的方式,如下链接,是微信用户头像的原始链接;https://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(&#39;src&#39;, function(){

return $(this).attr(&#39;isrc&#39;).replace(/\/0$/, &#39;/46&#39;);
});

2.headimg img的头像,既有微信的头像,又有其他非微信的头像,需要先做一下判断,作为区分。

if(($(".headimg img").attr("isrc")).indexOf("https://wx.qlogo.cn")==0){
$(".headimg img").attr(&#39;src&#39;, function(){
return $(this).attr(&#39;isrc&#39;).replace(/\/0$/, &#39;/64&#39;);
});
}else{
$(".headimg img").attr(&#39;src&#39;, function(){
return $(this).attr(&#39;isrc&#39;);
});
}

相关文章
最新文章
热点推荐