Question

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

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

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 concept。但我需要不同的解决方案来缓存尚未请求的图像。

有没有人能说明如何做到这一点？

<小时/> 更新：我尝试使用标签本身请求单个图片（.png），这是所有50个图片精灵的尺寸：0.76MB ，现在当我加载Sign-在页面中，它加载图像，然后用户可以看到UI。所以问题是我希望它首先显示UI，然后在像AJAX这样的背景加载图像。

Answer 1

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

<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 */ }));

Answer 2

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

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

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

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

从Node.js应用程序提供图像的最佳方式（使用快递）

2 个答案: