0

本を表す次の「光」オブジェクトがあるとします。

    var BookModel = function(data) {
        var self = this;
        self.id = ko.observable(data.id);
        self.title = ko.observable(data.title);
        self.pages = ko.observable(data.pages);
        self.pictureURL = ko.observable(data.pictureURL);
    };

ここで、たくさんの本を表示する必要があると想像してください。したがって、画面にたくさんの本の写真が表示されます。写真は必ずしもウェブサイトに掲載されているとは限りません。掲載されている場合でも、すべて表示されるまでに時間がかかることがあります。

私がしたいのは、pictureURL代わりに「遅延読み込みgif」を表示できるようにするために、この特定のプロパティが更新されたときに指定された画像をプリロードすることです。画像がプリロードされると、遅延読み込み gif の代わりに画像が表示されます。

どうすればこれを達成できますか?

4

1 に答える 1

2

さて、私はエクステンダーで次のようにしました：

ko.extenders.preloadImage = function(target, lazyImage) {
    var preloadedImage = null;
    var lazyLoadImage = lazyImage || "img/ajax-loader.gif";

    //create a writeable computed observable to intercept writes to our observable
    var result = ko.computed({
        read: target,  //always return the original observables value
        write: function(newValue) {
            var current = target();

            if(newValue == lazyLoadImage || newValue == preloadedImage) {
                valueToWrite = newValue;
            } else {
                preloadedImage = newValue;
                valueToWrite = lazyLoadImage;

                $('<img />').attr('src', newValue).load(function() {
                    valueToWrite = newValue;
                    preloadedImage = null;

                    target(valueToWrite);
                    target.notifySubscribers(valueToWrite);
                });
            }

            //only write if it changed
            if (valueToWrite !== current) {
                target(valueToWrite);
            } else {
                //if the rounded value is the same, but a different value was written, 
                // force a notification for the current field
                if (newValue !== current) {
                    target.notifySubscribers(valueToWrite);
                }
            }
        }
    });

    //initialize with current value
    result(target());

    //return the new computed observable
    return result;
};

そして、次の方法で使用できます。

   var BookModel = function(data) {
        var self = this;
        self.id = ko.observable(data.id);
        self.title = ko.observable(data.title);
        self.pages = ko.observable(data.pages);
        self.pictureURL = ko.observable(data.pictureURL).extend({ preloadImage : null });
    };

デフォルトのimg/ajax-loader.gif画像またはlazyImageパラメーターとして渡す別の画像で機能します。基本的に、新しい画像が表示されるときはいつでも、代わりに遅延読み込み gif が表示されます。元の画像がブラウザによってプリロードされた場合にのみ、実際に画面に表示されます。

これは大したことではありませんが、KnockoutJS 愛好家にとっては役立つかもしれません :-) また、改善できると思われる場合は、コードを編集してください。

于 2013-03-27T18:21:05.733 に答える