前言
今天发现博客评论的默认头像不显示了,博客使用的是多说评论,不知道啥情况,之前设置过一个默认头像,然而今天图片都加载不出来了,可对于我这种强迫症来说,这能忍吗?你能忍我也不能忍啊,这必须不能忍啊,看到一个个的红叉号简直刺透了心。于是,我决定,必须要干掉它!
初步尝试
默认头像不行了,我就重新上传个默认头像对吧,简单粗暴易行。来来来,说试就试!
然而上传完毕之后,它是这个样子滴,依然不给我面子!
你在逗我吗?是不是多说服务器哪里出毛病了?
究其原因
然而,美好的事情总是意想不到的发生,当我知道真相的一刻,整个人都惊呆了。 浏览器里审查一下元素,看它到底引用了神马鬼。
好,我就打开这个链接,惊呆了。简直棒到无极限! 域名已过期!域名已过期!域名已过期!重要的话说三遍!简直溜到不行!
好吧,这真是太棒了!!我还能说些什么!!!
峰回路转
行,既然这样,那我自己提供 CDN,用我自己的七牛云存储! 那就用 jQuery 好了,方便简单,在 </head> 标签前面加上这么个代码,来试试。
1 2 3 4 5
|
$(document).ready(function(){ $('.ds-avatar img[src*="cdncache"]').each(function(){ $(this).attr("src",'http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150525112155.jpg'); }) });
|
意思是,在页面加载完成之后,把 src 里面包含 cdncache 的多说头像 img 替换掉。 这句话最好加在所有 JS 的最后面,要不然可能不会生效。JS 执行是有先后顺序的。 这样,我们就会发现,头像已经奇迹般地发生了变化。
本身有头像的仍然是那个头像,使用默认头像的已经替换了新头像。
更上一层
然而这并不能满足我的愿望啊,我想要多变的头像样式,就是这么任性! 来来来,改代码,我再传上几个头像,让默认头像的孩纸们随机地使用我的头像,一定是炫爆了!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
|
<script type="text/javascript"> $(document).ready(function(){ var imgs = new Array(); imgs[0] = 'http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150525111154.jpg'; imgs[1] = 'http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150525111447.jpg'; imgs[2] = 'http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150525112058.jpg'; imgs[3] = 'http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150525112112.jpg'; imgs[4] = 'http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150525112129.jpg'; imgs[5] = 'http://qiniu.cuiqingcai.com/wp-content/uploads/2015/05/20150525112155.jpg'; $('.ds-avatar img[src*="cdncache"]').each(function(){ var rand = Math.floor(Math.random()*imgs.length); $(this).attr("src",imgs[rand]); }) }); </script>
|
嗯,把刚才代码优化成这样,我们就可以发现,整个网站的头像就被替换成我们想要的效果了!
简直酷炫!小伙伴们可以尝试一下!