2

我们设置了一个公共文件夹，其中包含 50 个便携式网络图形格式的小图像，基本上是（45 x 45px）的图标，用于工具栏设计。

考虑以下用于使用express设置公用文件夹的Node.js代码：

app.configure(function AppConfig() {
    app.set('port', 8080);
    app.use(express.bodyParser());
    app.use(express.errorHandler());
    app.use(express.cookieParser());

    app.use(express.static(app.root + '/app/public'));  // <== contains 50 icons in .png format

    app.engine('html', require('hbs').__express);
    app.set('views', app.root + '/views/html');
    app.set('view engine', 'html');
    });

由于第一页始终是登录页面，因此我希望所有工具栏图标图像都缓存在第一页上，并在后台自行加载，同时用户正在输入登录详细信息。

在后台搜索如何执行此操作时，我遇到了Image Sprite 概念。但我需要不同的解决方案来缓存尚未请求的图像。

任何人都可以说明如何做到这一点吗？

更新：我尝试使用标签本身请求单个图像（.png），它是所有 50 个大小为 0.76MB的图像精灵，现在当我加载登录页面时，它会加载图像，然后用户可以看到 UI。所以问题是我希望它首先显示 UI，然后在 AJAX 之类的背景下加载图像。

4

2 回答 2

6

您可以通过将图像精灵插入登录页面的最底部并使其不可见来预加载图像精灵。在浏览器解析和呈现您的登录页面时，它会遇到您的图像精灵并加载它，但不会显示它。因为它位于页面的末尾，所以它不会干扰 UI，您的用户将首先看到 UI。

<html>
<body>
...
  <div style="display:none">
     <img src="sprite.png"/>
  </div>
</body>
</html>

或者您可以使用 JavaScript 加载它

$(function() { // when DOM is ready
    $(window).load(function() { // when the page is fully loaded including graphics
        $('body').append($('<div><img src="sprite.png"/></div>').hide());
    });
});

另外，不要忘记指示 express 告诉浏览器精灵可以被缓存：

app.use(express.compress()); // optional
app.use(express.static(app.root + '/app/public', { maxAge: 86400000 /* 1d */ }));
于 2013-03-05T08:29:06.847 回答
1

服务器只能提供用户请求的内容。缓存由浏览器完成，以减少文件传输（页面所需）并提高性能。

为了进行缓存，浏览器必须至少请求一次文件。此后，它会检查文件是否已更新。如果服务器上的文件已更改，则丢弃缓存，否则将使用缓存。如果要缓存所有图像，只需将它们包含在登录页面中即可。之后，对文件的每个请求都将命中缓存。要知道您的文件正在节点中缓存，请检查日志。

//First access
GET /stylesheets/style.css 200 1270ms
//Thereafter from cache
GET /stylesheets/style.css 304 6ms

不用担心缓存，让浏览器处理它。

于 2013-03-04T15:32:00.450 回答