Blog技巧, 用JavaScript解决图像不能正常显示问题

          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">