1

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

这是一个好的解决方案吗？还是有“正确”/更好的方法？

谢谢！

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

4

3 回答 3

1

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

我会解决浏览器并不总是从缓存中获取图像的事实，因为它应该是。仔细检查您没有为某些调用使用 URI 的变体，然后检查发送的标头是否合适，并给出至少一个小时的 max-age，如果不是更多的话。

对于这种用途的图像，使用 pngslim 或类似的东西来刮掉将要发送的每个字节也不会受到伤害。

于 2012-08-15T18:02:49.340 回答
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>
于 2012-08-15T18:01:15.023 回答
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 个动画，图像也只会加载一次。

于 2012-08-15T18:43:22.690 回答