javascript - Phonegap で複数の画像をダウンロードする - FileTransfer

Question

Phonegap でオフラインアプリを作成しました。JSON データがプッシュされ、必要な場所に到達します。しかし、従わなければならない画像が常にたくさんあります.html5キャッシュは、アプリが閉じられたときにクリアされるのを見て、それを実行しません. 私はかなり長い間、これについてナゲットを壊してきました。

問題は、ファイルシステムにイメージが存在するかどうかを確認することです。「async:false」AJAX 呼び出しを使用してこれを行うことを選択したため、コードはある程度まで実行されます。overwrite を書き込んで false に設定する (エラーが発生する) という phonegap (ほぼハック) の方法を使用していません。

もう 1 つの問題は、Phonegap ブラウザーが一度に 3 つのダウンロードを許可することです (調べました)。私の以前の機能は、同時ダウンロードの量が多すぎると、画像のダウンロードを中断するだけだったため、この大失敗に苦しんでいました。これは、その時点で約 20 から 40 (サイズによって異なります) の画像でした (もちろん、ダウンロード速度を見ると奇妙ではありません)。一度に複数のダウンロードに分割すると急落します）。

問題は、ビルド方法です。

JSON データ (画像変数) をループする関数。
それらを一度に 3 つダウンロードします (そして、Apple がそうしなければならないと指示したため、メタデータを設定します)
不要になったものをディスクから削除します (この最後の問題は、私が読んだ限りでは inet 全体の問題です。そのため、これはオプションのままにしておきます。今では、実際にはスペースを気にする必要がなくなったためです)。
すべての画像がダウンロードされたときに関数を実行する必要があります。

これまでの私のコード:

var datadir = "";
var pics_at_the_time = 0;
var external_url_pics = "http://Folder on server where images are";

// new_config.pics holds the JSON data. Built: '[ key (same as id) { "id": 1234567890, "tld":"jpg" }'. id+'.'+tld = the image name. 

window.requestFileSystem( // get the root folder path
    LocalFileSystem.PERSISTENT,
    0,
    function(fileSystem) {
        datadir = fileSystem.root.fullPath;
    },
    function() {
        console.log("Could not get root FS");
    }
);

function fetch_images() {
    var len = new_config.pics.length; // amount of pictures that need to be here
    var all_in_counter = 0;
    $.each(new_config.pics,function(index,val){ // loop through all pics
        pic_exists(val);
    });
}

function pic_exists(val) {
    $.ajax({ // pic on disk or not
        async:false,
      url: 'file://'+datadir+'/'+val.id+'.'+val.tld, //or your url
      success: function(){
        var obj = val.id;
        delete new_config.pics.obj;
      },
      error: function(){
        var obj = val.id;
        delete new_config.pics.obj;
        downloadImage(val);
      }
    });
}

function downloadImage(val){
    if(pics_at_the_time < 3) { // only 3 at a time. else wait for a download to finish
        pics_at_the_time++;
        var ft = new FileTransfer();
        ft.download(
        external_url_pics+val.id+'.'+val.tld,
        datadir + "/" + val.id+'.'+val.tld,
        function(entry) {
            if(debug_console) { console.log("download complete: " + entry.name); }
            entry.setMetadata(function(metadata) { } , function(error) { console.log("Could not set meta data: "+val.id); }, { "com.apple.MobileBackup": 1}); // no apple cloudbackup for these pics. We can always re-download apparently
            pics_at_the_time--;
            fetch_images();
        },
        function(error) {
        if(debug_console) { console.log("download error target " + error.target); }
        pics_at_the_time--;
        fetch_images();
        });
    }
}

お分かりのように、コードはあまり洗練されておらず、既存の画像をチェックすることはありません。これは機能しますが、毎回束を再ループするのを見るのは完全ではありません。最初は良い考えのように思えました。しかし今、私は考え直しています。

どんな助けも明らかに感謝しています

javascript - Phonegap で複数の画像をダウンロードする - FileTransfer

0 に答える 0

Related

Reference