0

一種のスライドショーのために、次のように機能する巧妙な画像プリローダーを実装しようとしています:

  1. スライドショーの読み込み時に最初の画像が表示され、画像は 2、3、4、... の順にバックグラウンドで読み込みを開始します。
  2. ユーザーがイメージ n に切り替えることを決定し (これは、検索または親指または ... を介して行うことができます)、トリガーされたプリロード (1 から) がまだ n をロードしていない場合、順序 (2、3、4、...) ) 1. で確立された n を最初の要素として再編成されます。

2. の他の可能性は、プリロードを一時停止し、画像 n をロードして、プリロードを続行することです。 2、...、最後、1 番目の未ロード、2 番目の未ロード、...)。

これまでのところ、次のような単純なプリロード ループを実行しました。

for (var i = 0; i < issue.pages.length; i++)
{
  log("preloading image from URL " + issue.pages[i].imageUrl);
  var img = new Image();
  img.onload = function()
  {
    log("reading loading image " + this.src);
  };
  img.src = issue.pages[i].imageUrl;
}

これは正常に動作しますが、他の画像のダウンロードをブロックしているようです:

imageN = new Image();
imageN.src = issue.pages[n].imageUrl;

ループの画像がまだロードされている間、別の場所（親指のクリック）は、imageNループ内の順序から順番になる前にロードされません。

何か案は？

4

2 に答える 2

1

私の知る限り、JavaScript を使用して画像の読み込みを停止または一時停止する方法はありません。ただし、画像の読み込み順序を制御する適切な方法は、読み込みイベントを連鎖させることです。以下は例です(jQuery を使用)。

この例では、キューとして使用している配列と、キューから画像を取得してロードし、画像のロードが完了したときに呼び出すimgQueue関数があります。loadNextImageloadNextImage

function loadNextImage() {
    if (imgQueue.length > 0) {
        var imgN = new Image();
        imgN.src = imgQueue.shift();
        $(imgN).load(function(){
            $("#main").append(imgN);
            loadNextImage();
        });
    }
}

imgQueue画像が読み込まれる順序を変更するには、たとえば、画像 5 を前面に移動したい場合は、文字どおりに画像を前方に移動します。

imgQueue.unshift(imgQueue.splice(4,1));

これは完璧ではありません。たとえば、イメージが大きい場合を除き、イメージをグループでロードする方が理にかなっている可能性があります。またloadNextImage、元のインデックスだけでは画像を追跡できないキューを操作するため、後で見つけられるようにハッシュとして保存するなどの凝った処理を行う必要があります。

var imgHashQueue = [
   {name: "name", url = "url"},
   ...
]
于 2011-08-09T14:24:59.380 に答える
0

ここにいくつかのリソースがあります: http://ditio.net/2010/02/14/jquery-preload-images-tutorial-and-example/ - http://engineeredweb.com/blog/09/12/preloading-images-jquery -and-javascript

前の SO ディスカッション: jQuery を使用した画像のプリロード

于 2011-08-09T13:35:12.403 に答える