3

ユーザーがダウンロードするにつれて、より高品質の画像を徐々に表示している状況があります。

ロジックは次のようになります。

3 画像フォーマット: 低品質 (5-8kb)、大 (60-80kb)、高解像度 (150-250kb)。

  1. 大きな写真または高解像度の写真がキャッシュされているかどうかを確認します。キャッシュされている場合は、最初にキャッシュされたバージョンと FINISH を表示します。
  2. 低品質の画像を読み込んでいない場合は、すぐにユーザーに表示します。
  3. 大きな画像を事前にキャッシュし、読み込まれたら img.src を変更します。
  4. ユーザーのウィンドウ サイズが特定のしきい値を超えているかどうかを確認し、高解像度の画像をプリキャッシュし、読み込み時に img.src を変更します。

すべてが美しく機能します。

ただし、高解像度のダウンロード中にユーザーがクリックして次の画像に移動すると、前の高解像度の画像が読み込まれたときにイベントがオンロードで発生するように設定されているため、もちろんすべてが台無しになります。

基本的に onload イベントは、ユーザーがクリックして次の画像に移動した後に発生します。つまり、新しい画像が古い画像に置き換えられます。

私がする必要があるのは、ユーザーが次の写真に変更するたびに機能をキャンセルできることです。

関数は次のようになります。

(function(index){
        $(highresimage).imagesLoaded(function(){
                    setTimeout(function(){
                        self.cache.image = $(highresimage).appendTo(self.cache.imagewrap);
                        self.cache.photos[index]['highresloaded'] = true;
                        setTimeout(function(){
                        self.cache.imagewrap.children('img').first().remove();
                        self.cache.image.css({
                            'left':'',
                            'position':'relative'
                        });
                        },10);
                    },200);
        });
})(index);

そのため、プログラムでキャンセルできるようにする必要があります$(highresimage).imagesLoaded(function(){});

これを達成する最良の方法は何ですか？

前もって感謝します。

編集：私の例では、実際に画像を複製し、srcを変更し、それをdomに追加し、数ミリ秒残してから古い画像を削除していることに注意してください。これは、高解像度画像の src を変更するとフラッシュが発生する Firefox のバグによるものです。恐ろしいことですが、醜いタイムアウトを削除すると、Firefox でのユーザー エクスペリエンスが大幅に悪化します。彼らは理由があってそこにいます。:P

4

2 に答える 2

3

setTimeoutを変数に保存すると、 を使用clearTimeoutしてキャンセルできます。理論的には、画像の読み込みは中止されるべきです。

var timeout = setTimeout(do_something, 1000); // create

clearTimeout(timeout); // cancel

のソースコードをimagesLoaded()見た後、その機能をキャンセルできるものは何も見つかりません。これは少し残念です:(

于 2012-12-18T10:33:44.787 に答える
0

特定のイメージについて、待機している最新のイメージを追跡する必要があります。次に、以前は読み込みを待っていた他の画像の読み込みが完了すると、読み込みが完了した画像がまだ待っているものであるかどうかを確認できます。そうでない場合は、ロードが完了したという事実を無視します。その場合は、現在のイメージを待っているイメージに置き換えます。

あなたの現在のコードはかなり乱雑で (複数のタイマー)、私たちが慣れていないプラグインを使用しているため、タイミングを計ったり、次の画像に移動したりする方法が実際にはわかりません。ただし、次の画像の状態を維持し、読み込みが完了した画像が実際にその画像であるかどうかを確認する必要がある場所があります。これにより、間違ったイメージを配置することがなくなります。

PSコードに2つの短いタイムアウトがある理由がわかりません。タイムアウトは必要ありません。画像の読み込みを開始し、読み込みが終了したときにタイムアウトなしで動作できる必要があります。

于 2012-12-18T10:41:00.673 に答える