1

ユーザー向けに「ドラッグアンドドロップ」ファイルアップロードユーティリティを作成しました。13個のPMG画像からアップロードプログレスバーを作成し、jQueryを使用してアニメーション化しました。ユーザーが1つまたは2つのファイルを同時にドロップするだけであれば、これは非常にうまく機能します。しかし、ユーザーが10個のファイルをドロップすると、ブラウザーがすべての画像に対して要求を行うことに気付きました（130要求）。ブラウザがこれらの画像をキャッシュから取得する場合もありますが、取得しない場合もあります。したがって、私の解決策は、次のように画像をプリロードすることでした。

function preload()
{ 
    // create object
    imageObj = new Image();

    // set image list
    images = new Array();
    images[0]="img/ProgressBarContent.png";
    images[1]="img/ProgressbarEndEffect.png";
    images[2]="img/0.png";
    images[3]="img/1.png";
    images[4]="img/2.png";
    images[5]="img/3.png";
    images[6]="img/4.png";
    images[7]="img/5.png";
    images[8]="img/6.png";
    images[9]="img/7.png";
    images[10]="img/8.png";
    images[11]="img/9.png";
    images[12]="img/percentIcon.png";
    images[13]="img/ProgressBar.png";

    // start preloading
    for(var i = 0; i < images.length; i++) 
    {
        imageObj.src=images[i];

        if(i == (images.length-1))
        {
        //preloading done, give a visual feedback and droping functionality can be activated 
        hideLoadingOverlay();
        }     
     }
 }

しかし、それは何の違いもありませんでした。
そのため、PHPスクリプトに必要な画像を読み取らせ、それらをbase64としてエンコードし、次のようなJavaScript配列として出力できると思いました。

$file= base64_encode( file_get_contents ( 'img/0.png') );
echo 'images["img/0.png"] = "data:image/png;base64,'.$file.'";';

そうすれば、画像を直接HTMLに「ハードコーディング」することもできますよね？
JavaScriptでこれができると思いました：

$(".selector").attr("src", images['filename']);

これは良い解決策ですか？または、「適切な」/より良い方法はありますか？

ありがとう！

編集：古いブラウザがこれをサポートしていないかどうかは関係ありません。スクリプトは、私が知っている人だけが使用する管理領域に使用されます。（そして、それらはすべて最新のブラウザーを備えています。）

4

3 に答える 3

1

より良いアイデアは、Webサーバーが画像に対して適切なキャッシュヘッダーを発行していることを確認することです。これを行うと、ブラウザーはそれらを1回だけ要求し、後続の要求のためにキャッシュからプルします。キャッシュ設定の構成についてサポートがない場合は、使用しているWebサーバーでこの回答にコメントしてください。回答を編集します。

さらに、javascriptを使用してページの読み込み時にすべての画像をプリロードして、次のように表示する必要があるときまでにブラウザに画像がキャッシュされていることを確認できます。

var imageObj = new Image();
var images = new Array();
images[0]="image1.jpg"
images[1]="image2.jpg"
images[2]="image3.jpg"
images[3]="image4.jpg"

for(var i=0; i < images.length; i++) {
    imageObj.src=images[i];
}

編集、apache2でのキャッシュの設定

これらの設定は、.htaccessファイルを使用して、ディレクトリごと/ファイルごとに構成できます。詳細については、こちらをご覧ください。基本的に、あなたがしたいのは、ドキュメントルートに.htaccessファイルを作成し、次のようなものを入れることです。

# cache images for 10 days
<FilesMatch "\.(ico|jpg|jpeg|png|gif)$">
  Header unset Pragma
  FileETag None
  Header unset ETag
  Header set Cache-Control "max-age=864000, public, must-revalidate"
  Header unset Last-Modified
</FilesMatch>
于 2012-08-15T18:01:15.023 に答える
1

URIスキームはIEでサポートされていません（dataサポートされている場合は、ごく最近追加されたものです）。

ブラウザが常にキャッシュから画像を取得しているとは限らないという事実を修正します。一部の呼び出しにURIのバリアントを使用していないことを再確認してから、送信されるヘッダーが適切であり、最大年齢が1時間以上であることを確認してください。

また、pngslimなどを使用して、送信されるもののすべてのバイトを削り取るために、この種の使用のために画像を傷つけることはありません。

于 2012-08-15T18:02:49.340 に答える
1

これを行う最良の方法は、スプライトを作成することです。これにより、画像が10x10で、アニメーションに10フレームがある場合、10x100のスプライトを作成します。

次に、それぞれが背景を10ピクセルオフセットするクラスを作成します。フレームごとに個別の画像をロードする代わりに、同じ画像をオフセットしてアニメーションを作成します。

私たちの状況でのCSSは次のようになります。

.sprite {
    background: url('/images/sprite.png');
    display: block;
    width: 10px;
    height: 10px;
}
.sprite.frame1 {
    background-position: 0 -10px;
}
.sprite.frame2 {
    background-position: 0 -20px;
}
...

jsは次のようになります。

for (i=0;i!=11;i++) {
    document.getElementById("MyElement").className = "sprite frame" + i;
}

あなたは絵を手に入れます。画面に100のアニメーションがある場合でも、画像は1回だけ読み込まれます。

于 2012-08-15T18:43:22.690 に答える