首页profile的头像有点太大了,加载要点时间,而且耗流量吧,就想着把图片改小,但是到手机上又会失真。
那能不能写个js检测设备来修改图片地址达到防失真的效果。
那肯定可以啊!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<img class="2x" src="img.png">
<script>
// To make images retina, add a class "2x" to the img element
var isMobile = {//检测设备UA
Android:function() {
return navigator.userAgent.match(/Android/i) ? true : false;
},
BlackBerry:function(){
return navigator.userAgent.match(/BlackBerry/i) ? true : false;
},
iOS:function(){
return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
},
Windows:function(){
return navigator.userAgent.match(/IEMobile/i) ? true : false;
},
any:function(){
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
}
};
if (isMobile.any()) {//如果是其中一个UA
var suffix = document.getElementsByClassName('2x')[0].getAttribute('src');//获取带2x的class的图片的src
suffix = suffix.replace('.png','@2x.png');//通过替换后缀的方法修改地址
suffix = suffix.replace('.jpg','@2x.jpg');
document.getElementsByClassName('2x')[0].setAttribute('src',suffix);//将src设置成替换过后缀的src
};
</script>

将要防失真的图片加个2xclass里就行了,同时需要在图片同一目录下创建一个带后缀@2x的高清版。