1

Titaniumが画像をどのように処理するのか疑問に思っています。画像ビューに画像をロードし、画像ビューの画像をローカル画像に変更してから、画像を前の画像に戻す場合、画像ビューは前の画像を再度ダウンロードする必要がありますか?

Titanium がダウンロードした画像をどのように処理するかはわかりませんが、キャッシュしないと思います。

画面外の画像を作成し、他の画像ビューを画像の URL に設定できると考えていましたが、これは機能しますか? それとも、画像ビューは画像をダウンロードしますか?

画像ビューがチタンでどのように機能するか、および画像をプリロード/再利用できるようにするための最良の方法を理解しようとしています.

ありがとう

4

2 に答える 2

7

2015 年 4 月の更新: Titanium 3.X の時点で、以下の Gautier の回答に従って画像にキャッシュがあります。

デフォルトでは、ImageView にリモート イメージはキャッシュされません。あなたのシナリオでは、リモート イメージに切り替えたときに、リモート イメージが再度ダウンロードされます。

私のプロジェクトのほとんどでは、ダウンロード後にローカル イメージを保存する cachingImageView を作成します。これは、 https://gist.github.com/938172にあるDawson Toth の作品に触発されています。唯一の問題は、イメージがローカルにキャッシュされた後にサーバー上で変更された場合、ファイル名が変更されない限り、クライアントは更新されたイメージを取得できないことです。コードは以下です。

exports.createCachingImageView = function(params) {
    var image = Ti.UI.createImageView();

    image.doRemote = function(imageURL) {
        image.remoteImage = imageURL;
        var file = Ti.Filesystem.getFile(somedirectory, image.localFileName(imageURL));

        if(!file.exists()) {
             // cached file does not exist, load the image
            image.addEventListener("load", image.saveImageOnLoad);
            image.image = imageURL;
        } else {
            Ti.API.debug(image.localFileName(imageURL) + ' does exist, just setting image');
            image.image = file.nativePath;
        }
    };

    image.saveImageOnLoad = function(e) {
        Ti.API.debug('saving image ' + image.localFileName(image.remoteImage));
        var f = Ti.Filesystem.getFile(somedirectory, image.localFileName(image.remoteImage));
        if(!f.read()) {
            f.write(e.source.toBlob());
        }
        e.source.removeEventListener('load', image.saveImageOnLoad);
    };

    image.localFileName = function(imageURL) {
        hashedSource = Ti.Utils.md5HexDigest(imageURL + '');
        return hashedSource;
    };
    if(params.image) {
        image.doRemote(params.image);
    }

    for(var v in params) {
        if(v != 'image') {
            image[v] = params[v];
        }
    }

    return image;
};

imageView を使用せずにイメージをスタンドアロンでダウンロードする場合は、Ti.Network.httpClient を使用してイメージを取得し、次のようにファイル システムに保存します。

xhr.onload = function(){    
  var file = Ti.Filesystem.getFile(somedirectory, somefilename );
  file.write(this.responseData);
}

これを使用して事前に画像を取得するため、クライアントが画像を使用するとすぐに画像が表示されます。

于 2012-07-09T00:00:12.707 に答える
0

私は同じことをしなければならなかったので、このかなり古い質問を掘り下げます。

Android 3.1 および iOS から、デフォルトのキャッシュが追加されました: http://docs.appcelerator.com/titanium/latest/#!/guide/Image_Best_Practices-section-30082525_ImageBestPractices-Cachingremoteimagesを参照

Android プラットフォームでは、キャッシュは 25 MB に制限されており、データはアプリケーションの存続期間中 (デバイスにインストールされている限り) 残ります。iOS プラットフォームでは、キャッシュ サイズは事前に決定されておらず (サイズは保証されません)、データは iOS がディレクトリを消去するまでそこに残ります (ローカル ストレージがさらに必要になります)。

このドキュメンテーション ページにも、画像の手動キャッシュの独自の実装があります。

var Utils = {
  /* modified version of https://gist.github.com/1243697 */
  _getExtension: function(fn) {
    // from http://stackoverflow.com/a/680982/292947
    var re = /(?:\.([^.]+))?$/;
    var tmpext = re.exec(fn)[1];
    return (tmpext) ? tmpext : '';
  },
  RemoteImage: function(a){
    a = a || {};
    var md5;
    var needsToSave = false;
    var savedFile;
    if(a.image){
      md5 = Ti.Utils.md5HexDigest(a.image)+this._getExtension(a.image);
      savedFile = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory,md5);
      if(savedFile.exists()){
        a.image = savedFile;
      } else {
        needsToSave = true;
      }
    }
    var image = Ti.UI.createImageView(a);
    if(needsToSave === true){
      function saveImage(e){
        image.removeEventListener('load',saveImage);
        savedFile.write(
          Ti.UI.createImageView({image:image.image,width:'auto',height:'auto'}).toImage()
        );
      }
      image.addEventListener('load',saveImage);
    }
    return image;
  }
};
// example usage
var image = Utils.RemoteImage({
  image:'http://farm7.staticflickr.com/6059/6262552465_e53bccbd52_z.jpg',
  defaultImage:'KS_nav_ui.png',
  width:300,
  height:200,
  top:20
});
win2.add(image);
于 2014-09-21T15:44:49.807 に答える