0

ウェブサイトに表示している画像がたくさんあります。

さまざまなレベルの品質の各画像があります。私は親指（〜10kb）、小（〜200kb）、中（〜1.2mb）、大（〜2.5mb）を持っています。私が望むのは、親指の画像が表示され、javascriptが小さいものをロードし、ロードされたときにそれを置き換え、次にメディアをロードしてそれを置き換えることです。そうすれば、画像がすぐに表示され、品質がどんどん良くなります。

画像は div の背景として表示されており、サイズは含まれているように設定されているため、小さい画像が引き伸ばされてスペースを埋めます。

画像をロードし、ロード時に背景を置き換えるjQueryに必要なものはすべてです。

アップデート

これが私がそれを解決した方法です。各画像を読み込み、完了時に表示する非表示の img 要素を作成しました。しかし、私はそれを片付けるのを手伝ってくれる人にノーとは言いません。

htmlはちょうど

<img id="image_loader" style="display:none;" />

そしてjQueryは

$("#image_loader").attr("src", SmallURL);
$("#image_loader").load(function() {

    $("#image_container").css("background-image", 'url('+SmallURL+')');

    $("#image_loader").attr("src", MedURL);
    $("#image_loader").load(function() {

       $("#image_container").css("background-image", 'url('+MedURL+')');

       $("#image_loader").attr("src", LargeURL);
       $("#image_loader").load(function() {

           $("#image_container").css("background-image", 'url('+LargeURL+')');
           $("#image_loader").unbind('load');

       });
    });
});

しかし、これはひどく厄介です。URLを配列に入れて実行しようとしました$.eachが、大きくスキップするだけです。

2回目の更新

また、すべての画像が読み込まれたら、load 関数のバインドを解除する必要があることもわかりました。そうしないと、無限ループに陥ってしまいます。これをクリーンアップできれば、無限ループが発生しない方法で実行できることを願っています。

これをきれいにする方法についてのアイデアはありますか？

4

1 に答える 1

2

まだチェックアウトしていない場合は、JQuery API を出発点として使用することをお勧めします。

あなたがやろうとしていることは、各レベルの品質で複数の画像をロードしたいように聞こえるので、次のような...

<img src="image_low.jpg" class="low"/>
<img src="image_med.jpg" class="med" style="display:none;"/>
<img src="image_high.jpg" class="high" style="display:none;"/>

<script>
    $('.low').load(function() {
        $(this).attr("src", $('.med').attr('src'));
    });

    $('.med').load(function() {
        $(this).attr("src", $('.high').attr('src'));
    });
</script>

編集：私はここで改善されたここで自分の試みをしました

于 2012-10-03T12:26:11.893 に答える