使用KnockoutJS時，如何在顯示可觀察圖片的同時顯示臨時圖片？

Question

想象一下，你有代表一本書下面的「光」的對象：

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。

我該如何做到這一點？

Answer 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愛好者在這裏:-) 此外，如果你認爲它可能會更好，請編輯代碼。