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 回答