在NativeScript的StackLayout或ListView中使用ImageCache

Question

我有一個項目列表，每個項目都有一個圖像。我想緩存圖像。

所以，我在XML事情大致是這樣的：

 <StackLayout> 
     <GridLayout> 
      <gv:GridView items="{{ kats }}" verticalSpacing="0" horizontalSpacing="0" 
         colWidth="{{ colWidth }}" rowHeight="100" padding="0" 
         itemTap="openKat" itemLoading="mainLoading"> 
      <gv:GridView.itemTemplate> 
       <GridLayout columns="*" rows="80,20"> 
        <Image row="0" src="{{ Image, Image | mkThumbLink() }}" /> 
        <Label row="1" text="{{ description }}" /> 
       </GridLayout> 
      </gv:GridView.itemTemplate> 
      </gv:GridView> 
     </GridLayout> 
    </StackLayout> 

，並在.js文件中被調用的函數作爲轉換器：

var imageCacheModule = require("ui/image-cache"); 
var imageSource = require("image-source"); 
var fs = require("file-system"); 
var cache = new imageCacheModule.Cache(); 
var mkThumbLink = { 
    // this method gets called as the page is loading. 
    toView: function(img) { 
     cache.placeholder = imageSource.fromFile(fs.path.join(__dirname, "res:speaker_1.jpg")); 
     cache.maxRequests = 25; 
     // Enable download while not scrolling 
     cache.enableDownload(); 
     var imgSource; 
     var url = 'http://www.domain.com' + img; 
     // Try to read the image from the cache 
     var image = cache.get(url); 
     if (image) { 
      // If present -- use it. 
      imgSource = imageSource.fromNativeSource(image); 
     } 
     else { 
      // If not present -- request its download. 
      cache.push({ 
       key: url, 
       url: url, 
       completed: function (image, key) { 
        if (url === key) { 
         imgSource = imageSource.fromNativeSource(image); 
        } 
       } 
      }); 
     } 
     // Disable download while scrolling 
     cache.disableDownload();  
     return imgSource; 
    }, 
    toModel: function(img) { 
     // this section does not get called at all 
    } 
}; 

的toView方法被調用頁面上的每個圖像都會加載，但我無法確定如何在圖像到達時將圖像推回頁面。在「cache.push.completed」部分，我猜？

Answer 1

我要離開這裏尋找那些仍在尋找答案的人。 這是爲我工作。我使用了TypeScript。

public get itemImage() : imageSource.ImageSource { 
    if (constants.IS_DEBUG) console.log("Attempting to fetch image for: " + this.key); 

    var cache = new imageCacheModule.Cache(); 
    cache.placeholder = imageSource.fromResource("background"); 
    cache.maxRequests = 2; 

    var imgSource: imageSource.ImageSource = cache.placeholder; 

    if (this.imageExists && this.itemImageUrl !== '') { 
     // Try to read the image from the cache 
     var image = cache.get(this.itemImageUrl); 
     if (image) { 
      // If present -- use it. 
      if (constants.IS_DEBUG) console.log("Image found in cache"); 
      imgSource = imageSource.fromNativeSource(image); 
     } 
     else { 
      // If not present -- request its download. 
      if (constants.IS_DEBUG) console.log("Image not cached, downloading..."); 
      cache.enableDownload(); 
      cache.enqueue({ 
       key: this.itemImageUrl, 
       url: this.itemImageUrl, 
       completed: (image: any, key: string) => { 
        if (constants.IS_DEBUG) console.log("Image downloaded"); 
        cache.disableDownload(); 
        if (this.itemImageUrl === key) { 
         imgSource = imageSource.fromNativeSource(image); 
         this.set('itemImage', imgSource); 
        } 
       } 
      }); 
     } 
    } 

    return imgSource; 
} 

線做的工作是this.set('itemImage', imgSource);