使用base64預加載圖像

Question

我為我的用戶制作了一個“拖放”文件上傳工具。 我在13個PMG圖像中創建了一個上傳進度條，並使用jQuery對其進行了動畫處理。 如果用戶只是同時刪除一個或兩個文件，那么這種方法很有效。 但我注意到，如果用戶丟棄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']);

這是一個好的解決方案嗎？ 還是有“正確”/更好的方式？

謝謝！

編輯：如果舊瀏覽器不支持這個並不重要。 這些腳本用於管理區域，僅供我認識的人使用。 （他們都有現代瀏覽器。）

Answer 1

更好的想法可能是確保您的Web服務器為您的映像發出適當的緩存標頭，一旦您這樣做，瀏覽器將只請求它們一次並從緩存中拉出后續請求。 如果您對配置緩存設置沒有任何幫助，請隨意使用您使用的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>

Answer 2

IE不支持data URI方案（如果是，則是最近添加的）。

我已經解決了這樣一個事實：瀏覽器並不總是從緩存中獲取圖像，因為它應該是。 仔細檢查您是否在某些調用中沒有使用URI的變體，然后檢查發送的標頭是否合適，並給出最大年齡至少為一小時（如果不是更多）。

對於這種用途來說，使用pngslim或類似的方法也可以使用pngslim或者類似的方法來削減所有要發送的字節。

Answer 3

最好的方法是創建一個精靈，所以如果圖像是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個動畫，圖像也只會加載一次。