4

私は現在、JQuery、RequireJS、Underscoreを使用して巨大なBackbone.jsアプリケーションを完成させています。

私のアンダースコアテンプレート（たくさんの.png）にはたくさんの画像があり、append（）に少し時間がかかります|| 現在のビューでこれらのテンプレートをprepend（）します。

だから私がやっていることをする良い方法がありますか？テンプレートにプリロードを行うためのライブラリまたは例を探しています。

4

2 に答える 2

8

テンプレートで使用するための特別なライブラリがない限り、必ずしもこのためのライブラリが必要だとは思いません。これらの関連する質問で詳しく説明されているように、画像のプリロードは比較的簡単です。

$("<img />").attr("src", url);

で画像をプリロードしurlます。これを配列に簡単に適用できることは明らかです（ここ$.eachでは簡潔な構文に使用しています）。

function preload(urls) {
    $.each(urls, function(i, url) {
        $("<img />").attr("src", url);
    });
}
preload(['/images/1.png', '/images/2.png', ... ]);

このためのライブラリは必要ありません。あなたの場合、難しいのはプリロードするURLのリストを生成することです。テンプレートシステムをよりよく理解せずにここで最良のアプローチを知ることは不可能ですが、ここにいくつかのアプローチがあります：

  • テンプレートをメモリ内のDOMオブジェクトとして使用できる場合は$('img').map(function() { return $(this).attr('href') })、URLを検索するなどの方法を使用してテンプレートをループできます。ただし、タグでアンダースコアテンプレートを使用して<script>いて、ビューをレンダリングするまでそれらをDOMオブジェクトにしない場合、これが機能する可能性は低くなります。ダミーデータを使用してレンダリングするのは面倒で、プロセッサに負担がかかります。 URLを抽出するためだけに。

  • Antのようなビルドシステムを使用していて、テンプレートが他のコードからかなり離れている場合（たとえば、各テンプレートが別々のファイルにある場合）、正規表現を使用してURLのテンプレートを解析し、それらを配列に貼り付けることを検討してください。プリローダーへの入力に使用できるJavascriptファイル。これは非常に複雑なビルドタスクですが、すべてのテンプレート解析は実行時ではなくビルド時に行われるため、パフォーマンスの観点からはおそらく最良のオプションです。

  • 別のビルドシステムのアプローチは、おそらくもっと簡単ですが、プリロードするすべてのイメージを特定のディレクトリに配置し、そのディレクトリの下にあるすべてのファイルをJavascript配列に配置することです。これはおそらくAntを使用する最も簡単なアプローチですが、イメージのディレクトリ構造を変更する必要がある場合があります。

  • URLの配列はいつでも手動で作成できますが、複雑なテンプレートのセットを使用して最新の状態に保つのは面倒です。

  • preload(upcomingImages)複雑なアプリを使用していて、特定の画像のみを常にプリロードする場合は、それらの画像を手動で識別してから、適切なタイミングで適切な画像のセットを呼び出す必要があります。

于 2012-01-20T23:08:47.223 に答える
1

よりきめ細かい制御が必要な場合は、DOMのImageオブジェクトを使用できます。好き：

var img = new Image();

img.src = 'image.png';

img.load = function () {
  console.log('image.png is fully loaded');
}

画像のURLと少なくとも1つのコールバックをキューに入れる必要があります。

単純なワーカーは次のようになります。

function worker (url, callback) {
  var img = new Image();
  img.src = url;
  img.load = callback;
}
于 2012-01-21T16:09:00.453 に答える