CSDN BLOG问题会有不少的问题,尤其是在你定制你的BLOG的时候,总是会遇到很多难以解决的问题,而在这个时候我们总是抱怨BLOG的提供商如何如何的差．实际上这是一个很难解决的问题，CSDN BLOG允许用户自定义CSS,允许用户添加JavaScript代码，这就给了用户很大的权限，所以我们有很大的空间去改造自己的BLOG，然而如果我们添加了不好的CSS和JavaScript代码的话，同样我们的BLOG看上去也会变的相当糟糕，遇到各种千奇百怪的问题．这是一个很大的矛盾，CSDN BLOG自己可能也很难选择．
用CSS+JavaScript以及HTML代码，我们几乎可以更改页面上的所有内容，所以用好了它的话确实可以解决不少的问题．只要能够想到，一般都能够做到．
问题的提出：
我在定制自己的BLOG的时候，发现我在相册总是不能正确地显示，当图片比较多的时候老是会被挤到页面的下方，我发现很多的BLOG都遇到了这样的问题，所以决定写点东西把它解决了，供其他遇到同样问题的Blogger参考．暂时CSDN BLOG还没有设置图片大小的功能，所以只能我们自己动手解决了。
这是我的blog的图片在改进前的截图。 糟糕的排版！
如果你懒得了解它的原理的话，那就直接从改进：去掉magic number开始吧
基本原理：
利用document.images数组，遍历BLOG中的所有Image,找到我们要修改的图像，更改其属性就可以了．
具体实现
根据这个原理，因此我们很容易写出如下的JS代码．
1 <SCRIPT>
2 function adjust_image()
3 {
4 var blogname = "shaohui"; //改成你的blog的名字
5 var thisurl = this.location.href;
6 var imagesize = 90; //改成你所想要的图象的宽度
7
8 if ((thisurl.indexOf("http://blog.csdn.net/"+blogname+"/Gallery")>=0)
9 && (thisurl.indexOf("http://blog.csdn.net/"+blogname+"/Gallery/image") < 0))
10 {
11 var cnt;
12 for (cnt=0; cnt<document.images.length-2; cnt++)
13 {
14 if (cnt > 11)//magic number，bad code style
15 document.images[cnt].width = imagesize;
16 }
17 }
18 }
19
20 adjust_image();
21 </SCRIPT>
稍微解释一下这段代码第8,9行是判断当前页面是否是你的相册，如果不是的话就没有必要执行下面的JS代码了，基本原理是分析当前页面的URL.
第12行for循环执行了document.images.length-2次，那是因为每个页面的下方都有两个我们不用更改的图片．
第14行是判断相册图象的开始位置，这需要你手工去定位，在你的blog上去尝试这个数字是多少，确实需要改进．后面会谈到．
测试代码
当我们把这段代码拿去放到我们的Blog里面的时候才发现，实际上它并不能工作．检查一下，确实也没有错误。仔细查阅了一下，发现这和浏览器的实现有关，一般来说浏览器都是读到JavaScript就马上执行，但是在这个时候我们的页面还没有被浏览器全部下载，而实际上CSDN BLOG在处理我们的JS的时候是把它放在了页面内容的前面，所以，我们用document.images数据是没有办法访问到还没有被下载的图象的．
解决办法
找到了原因，其实就很容易解决问题了。把这段JavaScript推迟到页面载入完成以后才执行就可以了．把第20行代码换成以下代码就可以了。
window.attachEvent("onload",adjust_image);
改进：去掉magic number
实际上，我们只需要增加一个不可见的Image,放在我们定义的html的最后就可以很容易判断什么位置是相册的开始位置．强调一下，这句代码要放在你的HTML的最后．
<IMG src="invalid_image_url_just_a_tag" style="DISPLAY: none">
那么相应地，我们的JS代码也要做相应的更改，不过现在，在任何地方都有效了，而不用去尝试这个magic number.为了你在CTRL+C,CTRL+V方便，我去掉了行号．
function adjust_image()
{
var blogname = "shaohui"; //改成你的blog的名字
var thisurl = this.location.href;
var imagesize = 90; //改成你所想要的图象的宽度
if ((thisurl.indexOf("http://blog.csdn.net/"+blogname+"/Gallery")>=0) && (thisurl.indexOf("http://blog.csdn.net/"+blogname+"/Gallery/image") < 0))
{
var cnt;
var flagidx = -1;
for (cnt=0; cnt<document.images.length-2; cnt++)
{
if (document.images[cnt].src.indexOf("invalid_image_url_just_a_tag") >= 0)
flagidx = cnt;
if (flagidx >= 0)//如果该图象已经在我们设置的标记以后,更改该图象
document.images[cnt].width = imagesize;
}
}
}
window.attachEvent("onload",adjust_image);
</SCRIPT>
实际的效果可以在http://blog.csdn.net/shaohui/Gallery/173138.aspx 看到，你可以在IE和FireFox分别尝试一下，都可以工作，不过由于CSDN BLOG的速度确实没有以前快了，所以等页面上的所有内容都下载完毕还是需要一定的时间的。
更为复杂的实现
基本原理是利用一个timer,不断地去判断页面是否已经载入完成。不作进一步解释，有兴趣可以了解一下．把以下代码放入你的公告的最后就可以了。
<SCRIPT>
function adjust_image()
{
var blogname = "shaohui"; //改成你的blog的名嫿
var thisurl = this.location.href;
var imagesize = 95; //改成你所想要的图象的宽度
if ((thisurl.indexOf("http://blog.csdn.net/"+blogname+"/Gallery")>=0) && (thisurl.indexOf("http://blog.csdn.net/"+blogname+"/Gallery/image") < 0))
{
var flagidx = -1;
for (cnt=0; cnt<document.images.length-2; cnt++)
{
if (document.images[cnt].src.indexOf("invalid_image_url_just_a_tag") >= 0)
flagidx = cnt;
if (flagidx >= 0)//如果该图象已经在我们设置的标记以后,更改该图象
document.images[cnt].width = imagesize;
}
}
}
var loadComplete = false;
var timerID;
window.attachEvent("onload",load_completed);
timerID = window.setInterval(on_timer,1);
function load_completed()
{
loadComplete=true;
}
function on_timer()
{
if(loadComplete)
{
adjust_image();
window.detachEvent("onload",function(){load_completed;});
window.clearInterval(timerID);
}
}
</SCRIPT>
<IMG src="invalid_image_url_just_a_tag" style="DISPLAY: none">
|