使用 base64 预加载图像 - Preloading Images using base64

>我已经为我的用户制作了一个"拖放"文件上传实用程序。我用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']);

这是一个很好的解决方案吗？还是有"适当"/更好的方法？

谢谢！

编辑：如果旧浏览器不支持此功能也没关系。这些脚本用于管理区域，仅供我认识的人使用。（他们都有现代浏览器。

不支持data URI方案（或者如果支持，它是最近添加的）。

我会解决浏览器并不总是从缓存中获取图像的事实，因为它应该是。仔细检查是否未对某些调用使用 URI 的变体，然后检查发送的标头是否合适，并且最长期限至少为一小时（如果不是更长的话）。

使用pngslim或类似的东西来剃掉将发送的内容的每个字节的图像也永远不会受到伤害。

更好的主意可能是确保您的 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];
}

编辑，在 apache 中设置缓存2

您可以使用 .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>

最好的方法是创建一个精灵，因此如果图像是 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 个动画，图像也只会加载一次。