javascriptについて 質問です


IMG要素の画像を
切り替える、次のようなスクリプトを書いています。

<HTML>
<HEAD>
<script language="JavaScript">
<!--

var imgs = new Array(
'http://imgsrc.hubblesite.org/hu/db/1999/12/images/a/formats/1280_wallpaper.jpg',
'http://imgsrc.hubblesite.org/hu/db/2007/19/images/a/formats/1280_wallpaper.jpg',
'http://imgsrc.hubblesite.org/hu/db/2004/27/images/a/formats/1280_wallpaper.jpg',
'http://imgsrc.hubblesite.org/hu/db/1999/12/images/a/formats/1280_wallpaper.jpg',
'http://imgsrc.hubblesite.org/hu/db/2006/23/images/a/formats/1280_wallpaper.jpg'
);

var img_t;
var img_idx = 0;

function changing(){
if(!img_t)
img_t = document.getElementById("target");
img_t.src = imgs[img_idx++];
if(img_idx==imgs.length)
img_idx = 0;
}


</script>
</HEAD>

<BODY>
<INPUT type="button" value="切替" onClick="changing()">
<BR />
<IMG alt="sample" id="target">
</BODY>
</HTML>

切替ボタンを押した瞬間から
表示されるまでの間に 画像を非表示にしたいと考えています。

ただし、スタイル属性は操作しません。
ブラウザはIE6です。
良い方法があったら ご教授ください。

回答の条件
  • 1人2回まで
  • 登録:2007/12/25 17:21:35
  • 終了:2008/01/01 17:25:02

回答(0件)

回答はまだありません

  • id:you_got
    コメントありがとうございます。

    スタイルへのアクセスがあり、
    レイアウト崩れも発生するので、
    対象外、です。

    言葉足らずだったので補足します。
    スタイルシートを使用しないというのは、
    動的なスタイルシートの変更を利用しないということです。
    例には書いていませんでしたが、
    画像の切替は 同時に複数個に対して発生します。
    このとき複数のcss変更をおこなうと、
    動きがかくかくしてしまうんです。

    引き続き、回答をお待ちしています。
  • id:tukihatu
    質問の意図がいまいちわからないのでコメントで失礼します。

    切替ボタンを押した瞬間から表示されるまでの間、というのは
    前の画像が消えて、次の画像を読み込んでいる最中に、上からちょっとづつ画像が読み込まれるところを見られるのが嫌なので、全部読みこむまで隠しておいて、読み込んだら表示したい。

    ということでOKですか?
    質問文見る限り、切り替わりは正常に行われているようなので・・・

    スタイルですが、すくなくとも非表示にするならvisibilityというスタイルは必須な気がするのですが・・・
    奥の手もあるにはありますけどスマートじゃないですし。
  • id:you_got
    IE6の 仕様なのかわかりませんが
    次の画像の読み込みが終わるまで、
    前の画像が表示されっぱなしになります。

    その間が不都合なので
    なんとかできないか、という質問です。

    >スタイルですが、すくなくとも非表示にするならvisibilityというスタイルは必須な気がするのですが・・・

    言葉足らずですみません。
    スタイルそのものの使用は可です。
    しかし、今回は 複数の画像要素に以上の処理を行いため
    スタイル属性の動的操作がともなうと
    処理が遅くなってしまいます。
    これを回避する方法を模索している、というわけです。

    ↓javascript 高速化 参考資料(IT戦記 amachangさんの資料)
    http://d.hatena.ne.jp/amachang/20060417/1145236908
  • id:tukihatu
    んー、できませんでした。力不足で申し訳ない。

    質問の意図とは違いそうですが一応、
    ページを開いたときに、すべての画像をロードする方法があります。(プリロード)
    プリロードしてしまえば写真が移り変わる時のラグがなくなり、非表示にする必要もない、という寸法です。

    >||
    var imgs = new Array(
    'http://imgsrc.hubblesite.org/hu/db/1999/12/images/a/formats/1280_wallpaper.jpg',
    'http://imgsrc.hubblesite.org/hu/db/2007/19/images/a/formats/1280_wallpaper.jpg',
    'http://imgsrc.hubblesite.org/hu/db/2004/27/images/a/formats/1280_wallpaper.jpg',
    'http://imgsrc.hubblesite.org/hu/db/1999/12/images/a/formats/1280_wallpaper.jpg',
    'http://imgsrc.hubblesite.org/hu/db/2006/23/images/a/formats/1280_wallpaper.jpg'
    );

    var img_t;
    var img_idx = 0;
    var img_length = imgs.length; //イメージ数

    var preLoadimg = new Array(img_length); //イメージ数分のarray作成
    for(i = 0; i < img_length; i++){
    preLoadimg[i] = new Image();
    preLoadimg[i].src = imgs[i]; //イメージ読み込み
    }

    function changing(){
    if(!img_t)
    img_t = document.getElementById("target");
    img_t.src = imgs[img_idx++];
    if(img_idx==img_length)
    img_idx = 0;
    }


    </script>
    </HEAD>

    <BODY>
    <INPUT type="button" value="切替" onMouseDown="changing()">
    <BR />
    <IMG alt="sample" id="target">

    ||<

    inputの部分がonMouseDownになっているのは、プリロードしていたとしても、大きい画像だと入れ替えに0.5秒ぐらいのラグがあるので、ラグをなくすための悪あがきです。お好みでどうぞ。
    onMouseDownだと右クリックも反応してしまうので、onClickが一番いいとは思いますが。
  • id:you_got
    いろいろ試していただいて、ありがとうございます。

    プリロードもいい考えだと思いますが、
    今回は使えませんでした。
    勉強になります。

    いろいろ試した末
    透明のpngをプレロードしておいて
    表示切替中、その画像に差し替えることで解決しました。

    <HTML>
    <HEAD>
    <script language="JavaScript">
    <!--

    // 透明の画像を プレロード
    var loadingImage = new Image();
    loadingImage.src = 'http://www.google.com/intl/ja_jp/mapfiles/transparent.png';

    var imgs = new Array(
    'http://imgsrc.hubblesite.org/hu/db/1999/12/images/a/formats/1280_wallpaper.jpg',
    'http://imgsrc.hubblesite.org/hu/db/2007/19/images/a/formats/1280_wallpaper.jpg',
    'http://imgsrc.hubblesite.org/hu/db/2004/27/images/a/formats/1280_wallpaper.jpg',
    'http://imgsrc.hubblesite.org/hu/db/1999/12/images/a/formats/1280_wallpaper.jpg',
    'http://imgsrc.hubblesite.org/hu/db/2006/23/images/a/formats/1280_wallpaper.jpg'
    );

    var img_t; // ターゲット画像
    var img_n; // ストア
    var img_idx = 0;


    function init(){

    img_t = document.getElementById("target");

    img_n = new Image();

    // ストアに読み込み終わったらターゲットにセット
    img_n.onload = function() {
    img_t.src = img_n.src;
    };

    }

    function changing(){

    img_t.src = loadingImage.src; // ターゲット透明
    img_n.src = imgs[img_idx++]; // ストアに読み込み開始
    if(img_idx==imgs.length)
    img_idx = 0;
    }

    </script>
    </HEAD>

    <BODY onLoad="init()">
    <INPUT type="button" value="切替" onClick="changing()">
    <BR />
    <IMG alt="sample" id="target">
    </BODY>
    </HTML>

    透過pngがうまく使えないと思っていました。
    自己解決ですみません。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません