1

knockout.js を使用して、本質的に画像のプリローダーとキャッシャーを実現しようとしています。演習のポイントは、ロードしている画像がサーバーで最初に処理されることに加えて、ダウンロードにかなりの時間がかかることです。したがって、私の UI (画像のセット間を参照できる) は、負荷を軽減するために必要な場合にのみこれらのセットをダウンロードすることを目的としています。また、長い待機中に何かが起こっているというインジケータをユーザーに提供したくありません。

それが理由であり、現在の「方法」の説明は次のとおりです。

1: 配列に実際の画像データを入力するために、jQuery .load を使用します。

    images[doc.pages()[i].pagenumber() - 1] = $("<img />").attr('src', path).load(function() {}

私が .load を使用するのは、ネットワーク リクエストが完了するたびに DOM を更新するだけなので、コード ブロック内の反復ごとにカウンターを作成して、ロードが進行中であることをユーザーに示すことができるためです (例: loadCounter++;)。

2: .load コールバック内で、次のようにします。

if(loadedPages === doc.pages().length){
    if(loadedPages === doc.pages().length){
        for(var x = 0; x < images.length; x++){
            $("#" + doc.idname()).append(images[x]);
        } 
    }
}

ここで何が起きているかというと、images 配列には、すべてのネットワーク リクエストが完了すると構造に直接注入できる、実際にすぐに使える HTML 画像 DOM 要素が含まれているということです。

それが私の現在の方法であり、これが私が次に達成したいことです:

これを行う代わりに、ノックアウト observableArray に同じ画像データを入力し、その上で foreach バインディングを実行したいと思います。

<div data-bind="foreach:images">
    <img data-bind="what goes here?">
</div>

この例は最終的に私の問題に到達します。ノックアウトのデータバインド構造では、通常、属性にバインドできます<img data-bind="attr:{src:path}。ただし、これを行うと、dom が更新されるたびに画像が再ロードされます (画像データはブラウズ時に削除されます)。

最後に、抽出された質問は次のとおりです。observableArray に私の例のように DOM 画像要素を入力し、knockout.js で反復処理できますか? そして、これが実行可能または非現実的でない場合、できればノックアウトを使用して、画像をキャッシュおよび反復するための他のソリューションはありますか?

事前に感謝します。回答は報われます

アップデート

<object>タグは使えますか？例えば<object data-bind="attr:{data: $data.imageData}"></object>。私は今それで遊んでいますが、[object Object]しか得られません。

4

1 に答える 1

2

div でカスタム バインディングを使用して、その中に img 要素を追加できますか? ここでは、既にそれらをダウンロードしてまだ作成していると仮定していますか? 画像は、作成した DOM ノードの監視可能な配列になる可能性があります。

<div data-bind="imageAttach: images">
</div> 

ko.bindingHandlers.slideVisible = {
    init: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()); // Get the current value of the current property we're bound to
        // Loop over the array sent in, and add them all to the div
    },
    update: function(element, valueAccessor, allBindingsAccessor) {
        // You could delete all the image nodes here and add in the newly created ones
    }
};
于 2013-03-01T10:17:39.427 に答える