6

大きな画像で画像のちらつきに問題があります。私bodyには5つの画像があります：

<img id="img1" src="img1.png" width="250">
<img id="img2" src="img2.png" width="250">
<img id="img3" src="img3.png" width="250">
<img id="img4" src="img4.png" width="250">
<img id="img5" src="img5.png" width="250">

そして、私はそれらの1つをjQuery UIでドラッグしています。すべてがsrcdragendでも変更されています:

function dragStart() {
        $('#img2').attr('src','newimg2.png');
        $('#img3').attr('src','newimg3.png');
        $('#img4').attr('src','newimg4.png');
        $('#img5').attr('src','newimg5.png'); }

とても良い。ただし、すべての画像をクリックすると、ピクセル化されないビューポートのフルサイズにアニメーション化されるため、大きな画像 (2000 x 2000px) を使用する必要があります。

$this.animate(
                { width: 1800, top: -650, left: -250 }, 

                {
                    duration: 4000,
                    easing: 'easeOutElastic'
                })

すべての画像のサイズが原因で、ちらつきがあると思います。srcすべてが同時に変更された場合、画像のこのちらつきを防ぐ方法を知っている人はいますか?

がんばってくれてありがとう

4

4 に答える 4

4

あなたが説明した問題は、私にはプリロードの問題のようには聞こえません。

移動を開始したときにサーバーから別の画像をロードすると、プリロードが発生します。しかし、私があなたの質問を読んだように、SRC 内の画像を含む DOM オブジェクトを移動しています。

これはおそらくブラウザの問題です.2k x 2k から 100 x 100 まで画像を縮小する必要があるからです. あなたの主な問題は、あなたが言ったように、画像のサイズかもしれません。

同じ問題が発生するため、プリロードでさえ役に立ちません。

私の目には、画像の 2 つのバージョンが必要です。1 つは小さなもの (ドラッグしたいサイズ) で、もう 1 つは表示したいものです。大きなものは、ユーザーが画像をクリックしたときに、バックグラウンドまたはオンデマンドで自動的にロードできます。Web では、小さな画像を画面サイズに合わせてスムーズなアニメーションで表示し、バックグラウンドでプリロードを開始し、プリロードが終了したらフルスクリーンの画像を置き換えてピクセル効果を削除することは非常に一般的です。

私は自分自身を明確にしたことを願っています。

于 2013-05-24T15:20:58.307 に答える
4

次のような関数を使用して、画像をプリロードできます。

 function imagesPreload(){
     var imgArray = new Array("path/to/img1.jpg", "path/to/img2.jpg", "path/to/img3.jpg");
     for (var i=0; i<imgArray.length; i++) {
         (new Image()).src = imgArray[i];
     }
 }
于 2013-05-24T14:53:27.360 に答える
4

あなたがやろうとしていることの鍵は、プリロードと呼ばれます。ただし、これをどのように行うかを慎重に検討する必要があります。

プリロードには、img画面外のタグに画像をロードすることが含まれますが、DOM にはまだあります。これにより、画像がローカルにキャッシュされます。つまり、次に同じソースを使用しようとすると、サーバーに画像を照会する代わりにキャッシュからプルされます (ちらつきます)。

画像のプリロードは簡単です。

(new Image()).src="mysource.png";

決定したいのは、いつ画像をロードするかです。最初にそれらをすべてロードすると、多くの帯域幅を使い果たす可能性があります。クリックしてロードすると、バッファリングが発生します。

次のように、img タグに存在するイベントを使用してイメージがロードされonload、必要に応じて jQuery 内にラップされているかどうかを確認できます。

var i = new Image();
i.onload = function() {
  console.log("Loaded");
}
i.src = "mysource.png";

簡潔な Image() フォームについては、Robin Leboeuf の功績によるものです。

于 2013-05-24T14:50:41.793 に答える
0

コメントを参照してください。画像を表示する前に、画像が読み込まれていることを確認する必要があります。これはプリロードと呼ばれ、たとえばdisplay:none、必要な SRC を持つ非表示のイメージ (使用せずにオフスクリーンに配置する) によって実現できます。

編集：@Sebástienによるより精巧な回答を参照してください！

于 2013-05-24T14:51:15.040 に答える