2

モーダル画像ギャラリーを構築しました。ユーザーが次をクリックして次の画像を表示すると、次のようなものが実行されます。

document.getElementById('gallery-image').src = newSRC;

私の問題は、ユーザーが画像が実際に変更される場所の横をクリックしてから遅延があることです。(新しいイメージが読み込まれるため)。ユーザーが次にクリックした瞬間に画像要素を「空」にしたい。私はこれをやってみました：

    document.getElementById('gallery-image').src = '';
    setTimeout(function(){
        document.getElementById('gallery-image').src = newSRC;
        }, 100);

無駄に。新しい画像の読み込みが開始されるまで IMG 要素を「空にする」にはどうすればよいですか?

4

2 に答える 2

5

これを行うには、主に 3 つの方法があります。あなたの質問は、スライドプロジェクターがスライドを変更するのと同様の効果を作成したいことを示唆しているように見えたので、それを念頭に置いてこの回答を書きました.

  1. src空の文字列ではなく、プロパティを一時的に 1x1 の透過 GIF に設定します。これはあなたがしようとしたことと最も似ており、おそらく最も簡単な方法です。

    以下のデータ URI は、data-uri としてエンコードされた空の画像からのもので、Internet Explorer 8 以降およびその他の主要なブラウザーで動作するはずです。データ URI を使用すると、別のファイルを Web サーバーに保存して、ページの読み込み時に事前に読み込む必要がなくなります。ページのレイアウトを維持するために、 img 要素のwidthおよび属性を設定する必要がある場合があります。height

    このコードは、時間遅延の開始時に画像をプリロードしません (ただし、そうすることが可能です)。したがって、視聴者にとって明らかな遅延は、プログラムされた時間遅延と画像の読み込みにかかった時間の合計です。ブラウザがすでに画像をキャッシュしている場合、または Web サーバーがローカル ネットワーク上にある場合にのみ、読み込み時間がゼロに近くなります。

    var gi = document.getElementById('gallery-image');
gi.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
setTimeout(function(){
    document.getElementById('gallery-image').src = newSRC;
}, 100);

  2. 一時的に を設定し、時間遅延が経過してイメージがロードされたら、関数をdisplay: none;使用して変更を元に戻します。onload以下のコードは、時間遅延の開始時に画像の読み込みを開始します。視聴者の接続速度によっては、より一貫した明らかな遅延が生じる場合があります。

    var gi = document.getElementById('gallery-image');
var delayElapsed = false;
var imageLoaded = false;

gi.style.display = 'none';

setTimeout(function(){
    delayElapsed = true;
    maybeShowImage();
}, 100);

gi.onload = function() {
    imageLoaded = true;
    maybeShowImage();
};
gi.src = newSRC;

function maybeShowImage() {
    if (!delayElapsed || !imageLoaded) {
        return;
    }
    gi.style.display = '';
}

  3. 上記を実行しますが、代わりに設定visibility: hidden;します。これには、ページ レイアウトに影響を与えないという利点がありますdisplay: none;。

    // [...]

gi.style.visibility = 'hidden';

// [...]

function maybeShowImage() {
    if (!delayElapsed || !imageLoaded) {
        return;
    }
    gi.style.visibility = '';
}
于 2012-06-26T05:02:32.207 に答える
1

画像を非表示にしてから再表示できます...

// Hide
document.getElementById('gallery-image').style.display = "none";

// Show
document.getElementById('gallery-image').style.display = "";
于 2012-06-26T03:59:39.180 に答える