FCafe  実寸リンク制御(修正版)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 申し訳ありません。 先の記事に載せたスクリプトは完全ではありませんでした。
その事実に気付いたのは自宅PCでの閲覧時。 サムネイルがオリジナルに置換されてるのは良いのですが、大版画像がリサイズされずに表示されてるじゃないですか。
「あれ?」
と思ってもう一度表示しなおして見ると今度はちゃんとリサイズされてる。
「?(気のせいか)」
安心した一方で(心の中の)へたれアラームは鳴り止まない。
念の為別のUAで表示させてみるとやはり大サイズ画像は原寸で表示されちゃう。
( リロードすると(最初からそうだったように)リサイズ表示されるのも同じ )
「 ・・・・ 」
ネタをものした時の高揚感は急速に冷めていき、デバッグモードへ移行する管理人。

~ 中略 ~

 どうやら、スクリプトで画像のアドレスを交換した直後にその画像のサイズを取得しようとすると"0"が返されるようであると判明。 (横幅0の画像は当然リサイズされない)
ただし、その画像がキャッシュされてる(既にそのブラウザで表示された事がある)場合は正しいサイズが返される模様。(スクリプトは意図された通り機能する)
サンプル画像とサンプルページを作成したPCでは気付かなかった訳であります。 orz

「なおさなきゃマズいよな (でもオレに出来るのか?)」
苦闘すること暫し ・・・ 以下にその成果をお示しします。


【 設置法 】 今回の修正箇所はスクリプトソースのみです。 設置法・使用法(条件等)は前記事と変わりません。 新ソースは以下の通りです

<script type="text/javascript"><!--
var Pict=new Array();
var Q=new Array();
var A=document.getElementById('xxx').getElementsByTagName('A');
unction GCon(){
var k=-1;
for(i=0;i<A.length;i++){
 var H=A[i].href; if(H.search(/\/file\/.*\.jpg/)>0){
  var T=A[i].getElementsByTagName('IMG'); if(T.length>0){
   if(T[0].src==H.replace(/\.jpg/,"s.jpg")){
    Pict[i]=new Image(); Pict[i].src=H; k=i;Q[i]=1
} } } }
if(k!=-1){ Pict[k].onload=RS }
}

function RS(){
for(i=0;i<A.length;i++){
  if(Q[i]==1){
    var G=A[i].getElementsByTagName('IMG')[0];
    G.src=Pict[i].src;
    if(Pict[i].width>300) {
      G.style.width="300px";
      G.title=" Show in Full-Size ";
  } else {
      A[i].style.cursor="default";
      A[i].href="javascript:void(0)";
      A[i].target="_self";
} } } }
GCon();
//--></script>

【 解 説 】  考えてみれば(最初に)スクリプトが知ってるのは画像のアドレスのみであって、サイズとかデータ量とかは読み込んだ後でなければ分からないのは道理であります。 srcを変更した次の行でwidthを取るというのは無茶だったかもしれません。 ( IEでは何故かオリジナルソースでもOKなのですが )

サンプル1  は前記事のソースが使われています。 リロードした後は Firefox や Operaでも(一見)正常に作動するのはブラウザがその画像を覚えたからなのでしょう。(キャッシュを削除するとリサイズされなくなります)

サンプル2  はその仮定に基づいて対策を施したもので、”頁データのロード終了を待って画像のリサイズを行う”ように変更したもの。  ロード終了まで原寸表示によるレイアウト崩れを防ぐため srcと同時にdisplay属性も書き換えています。 (前段階で リサイズ前に alert() 実行、という方法も試しましたがOKでした )
window.onload で実行されるスクリプトが他にもあるとちょっとマズイ事になりますが・・・

サンプル3  はこの頁のソースを用いた物でオリジナル画像をプリロードさせるというもの。 頁全体の読み込みを待たず処理が行なえますので多少体感速度がUPするかもしれません

つづく

Comment

けんぱ けんぱ Edit
02/23 18:47

うちの猫道BLOGにいただいていきます。
これで省力化したら画像を引越しさせる気力がわくかもしれません(爆)

麻生さんが質問者にdanielさんのテンプレをリコメンドされてますねー(^-^)

daniel daniel Edit
02/23 20:18

けんぱさんこんばんは。
>麻生さん いや、本当にテンプレーター冥利に尽きるというか。
いつもお世話になっております。

久し振りにJUGEMへの管理画面に入ってみましたよ。
 ・・・・
JUGEMってサムネイル無かったんですね。 (すっかり忘れてました)
ファイル名が 20050108_1523696.jpg とかの形になってしまうのも
ファイルが一度に5つしかリストに表示されないのもそのまま。
( そもそも100kb以下の画像しかUPできないていうのが ry )
こりゃ 今時 WIN31パソ 使うのに匹敵するものがあります。
・・こちらの環境が如何にリッチであるか改めて認識した次第。

でも、オリジナル画像のみ使用するのも それなりに利点あります。
『JUGEMで(も)使える別法』 次に書かせていただきますよ


.  
HN Title URL PW secret

TrackBack http://pcafe.blog3.fc2.com/tb.php/434-90d447e8

Shown after Admisson
.

≫ 複数記事頁のみサムネイル 実寸表示リンク制御 ≪

2007 / 02 / 22  Thu
Entry   
Comment 2 / TB 0 / Edit
Designed by Daniel Corporation . all rights renounced
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。