使用 KnockoutJS，如何在加载可观察图片时显示临时图片？答案

【问题标题】：With KnockoutJS, how can I display a temporary picture while an observable picture is being loaded?使用 KnockoutJS，如何在加载可观察图片时显示临时图片？
【发布时间】：2013-03-27 18:21:05
【问题描述】：

假设您有以下代表一本书的“轻”对象：

    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。

我怎样才能做到这一点？

【问题讨论】：

标签： knockout.js knockout-2.0 preloading

【解决方案1】：

好吧，我通过以下方式使用extender 做到了：

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 爱好者有所帮助 :-) 另外，如果您认为它可以更好，请编辑代码。

【讨论】：