2009年02月22日
★ブログ画像のランダム表示をHack する！-Case.2-
【第 134 話】 ストレスなく画像を表示セヨ！- JavaScript 応用 編 -
The story [134] Can you show sexy pics on your blog without delay? - Continued JavaScript Chapter -
★日曜のお出かけから戻ってきて、さっそくオレのブログちゃんの背景画像が変わってるかどうかチェックしてみた。
！！！なにこれ。 - by Lovely Wolf -
★オレのブログはトップページを開くと、マイアルバムのページに移動するように仕掛けがしてある。
# トップページ
<WEB URL> http://lovelywolf.slmame.com
・・・ソラマメではマイアルバムを表示させたときに「個別記事」のHTMLテンプレートが読み込まれているようだが、オレが最近追加したスムーズスクロールのせいで、画像が出てくるまでに少し時間がかかるようだ。
その間、もともとスタイルシートに設定してあったデフォルトの画像が一度出てしまうため、想定しているランダムに選択された画像が出て来た頃には、あんた誰やねん？って感じだ。
# 時間指定を無視して最初にスタイルシートが出力してしまった画像（失敗例）
★これじゃ、あかんっつ～の。
・・・しばらくソースとにらめっこし、画像のURL を出力するのではなくて<body> タグの背景画像のスタイルシートを出力するロジックに変更してみた。
・・・【第 133 話】を参考にブログをさわった方で画像が表示されるのが遅いとお嘆きなら、以下のソースを参考にやり直してみてください。前回より、書き込む部分が増えました。バージョンは1.0.6 です。それにしても、チョロすぎる。
# 【第 133 話】
<WEB URL> http://lovelywolf.slmame.com/e536224.html
<head>
<script language="JavaScript">
/*--------------------------------------------------------------------------
* Blog Screen Saver, version 1.0.6
* Copyright(C)2009/* Lovely Wolf Report in SLMaMe * ALL Rights Reserved
* For details, please check the website : http://lovelywolf.slmame.com/
*--------------------------------------------------------------------------*/
// function setFixImage(){ // この行は不要
var h = (new Date()).getHours();
if((h >= 7) && (h < 17)){
//var imglist = new Array("//img01.tec29.com/usr/lovelywolf/slmame-banner-88.jpg"); // この行は以下のように書き換える
var imglist = new Array('<style type="text/css">body { background-image: url("//img01.tec29.com/usr/lovelywolf/slmame-banner-88.jpg");}</style>');
}
else if((h >= 17) && (h < 21)){
//var imglist = new Array("//img01.tec29.com/usr/lovelywolf/slmame-banner-87.jpg"); // この行は以下のように書き換える
var imglist = new Array('<style type="text/css">body { background-image: url("//img01.tec29.com/usr/lovelywolf/slmame-banner-87.jpg");}</style>');
}
else if((h >= 21) && (h < 24)){
//var imglist = new Array("//img01.tec29.com/usr/lovelywolf/slmame-banner-89.jpg"); // この行は以下のように書き換える
var imglist = new Array('<style type="text/css">body { background-image: url("//img01.tec29.com/usr/lovelywolf/slmame-banner-89.jpg");}</style>');
}
else{
//var imglist = new Array("//img01.tec29.com/usr/lovelywolf/slmame-banner-90.jpg"); // この行は以下のように書き換える
var imglist = new Array('<style type="text/css">body { background-image: url("//img01.tec29.com/usr/lovelywolf/slmame-banner-90.jpg");}</style>');
}
var num = Math.floor((Math.random() * 100)) % imglist.length;
//document.body.style.backgroundImage='url("'+imglist[num]+'")'; // この行は以下のように書き換える
document.write(imglist[num]);
// } // この行は不要
</script>
</head>
★【第 133 話】では、さらに、<body> タグにJavaScript を起動する部分を入れたが、バージョンは1.0.6 では不要だ。
<head>
HTMLヘッダ部分
</head>
<!--<body onLoad="setFixImage();" >-->
<body>
HTMLボディ部分
</body>
★JavaScript の記述が長いと背景画像が出てくるまでに待たされてしまうのだが、背景画像のスタイルシートを生成するロジックに変更したことで、ストレスなく一瞬にして指定した時間の画像が表示されるようになった。
# 17:00pm～21:00pm
# Tips 2. 同じ時間帯にいくつかの画像の中からランダムに表示させる方法
・・・こんな感じで、半角カンマでつなげてゆく。追加する部分にスタイルシートが中に埋め込まれているので、前後のくくりには半角シングルクォーションを使う必要がある。ソラマメの住人に意味が通じればイイのだが。
if((h >= 7) && (h < 17)){
var imglist = new Array('<style type="text/css">body { background-image: url("//img01.tec29.com/usr/lovelywolf/slmame-banner-88.jpg");}</style>', '<style type="text/css">body { background-image: url("//img01.tec29.com/usr/lovelywolf/slmame-banner-89.jpg");}</style>');
}
Posted by Lovely Wolf at 21:14│Comments(0)
│【SEXY デザインTips】
