2014年9月2日 星期二

如何搞出隨機首頁圖片?

下面這段不能貼在 <b:skin></b:skin>(或是 </head> 前) 裡,要放在 <body> 後。這篇寫的資料待求證。(因為我的網誌套用不了 〒△〒)

現行程式碼:


我一開始想用 C 語言的 struct 那樣方式來自行定義,但是 Javascript 不支援那種寫法,所以我就用兩個陣列,後來又改成一個陣列。

但我幾個月前看到 json 這東西。又因為面試完回來查資料時發現有 Object literal 這東西,雖然我到現在還沒搞懂它到底是什麼意思,反正就是這麼用了。原本查資料的時候有看到「json 不支援註解」這件事,但我在改的時候想到乾脆把註解也寫到一個欄位就好了。另一點是「中文需要轉碼」這件事,不過我是直接寫在檔案裡而不是還要另外下載並解碼,我覺得編碼這件事可以先省略掉。

改成這種寫法後,優點還蠻明顯的,就是圖片跟網址在程式碼中變成 banner[random].urlbanner[random].height。這樣程式碼不僅好寫而且也好讀很多啊!



其實當年有人提出另一個寫法的時候,就有把 banner.length 減一了。如果我當年就看得懂他寫的東西,這樣我就不用等那麼久之後才發現這個 Bug 的原因了。

您好, 小弟不小心闖進了閣下的地盤...

OK, 閣下 BLOG 蠻有趣的, 小弟不才, 野人獻曝, 也許可以幫助解決 "有時會出現,而有些時候不會出現" 的問題

首先, 小弟玩 XOOPS 時, 也做了隨機的 LOGO, 一樣 "有時會出現,而有些時候不會出現"

研究結果, "可能"是出在 Math.floor or Math.random 與 Google 某些服務有關; 巧的是, 小弟的不出現情況只發生在有使用 Google Map 的模組下... 跟 Powered bt Google 的搜尋(我也有使用)無關, 所以您查查...

我的方式, 您參考看看...

<head>
<script>
var myimages = new Array("http://lh1.ggpht.com/main_img_01.jpg", "http://lh2.ggpht.com/main_img_02.jpg", "http://lh3.ggpht.com/main_img_03.jpg");
var i = Math.floor(Math.random()*(myimages.length-1));
if (i == 0) i = 1;

function swapImage() {
document.getElementById('header').style.background='url(' + myimages[i] + ') no-repeat';
}

function PreLoadBannerImage(){//預先載入, 您可以試試
for (i = 0; i < myimages.length; i++) {
MM_preloadImages(myimages[i]);
}
}

window.onload = function () {
swapImage();
}
</script>
</head>
<body">

這是正常情況下的作法, 我幫您改好了, id 也是 header

但我突然發現, 不知 blogspot 是否允許修改 <body"> 內的東西(不熟 blogspot), 因為我為了預防 "不會出現" 的情況, 在 <body"> 內也放了這一段 <script>document.write('<div id="header" style="background-image: url(' + myimages[i] + '); background-repeat: no-repeat;">');</script> 以取代 id="header" ...

您參考囉

最後提醒:
因為 Flickr 社群規定,所以不能放首頁圖等東西於 Flickr 裡。我的做法是將他放於 Picasa 裡,普通網誌圖才放到 Flickr。