从Node.js应用程序提供图像的最佳方式（使用快递）
我们设置了一个公共文件夹，其中包含50个可移植networkinggraphics格式的小图像，基本上是用于工具栏devise的图标（45×45像素）。
考虑以下用于使用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'); }); 由于第一页始终是“login”页面，因此我希望在用户inputlogin详细信息时，所有工具栏图标图像都将caching在第一页加载自己的背景上。
在search如何在后台执行此操作时，我遇到了Image Sprite概念 。 但我需要不同的解决scheme来caching尚未请求的图像。
有没有人能告诉我如何做到这一点？
更新：我试图使用标签本身请求一个单一的图像（.png），这是所有50 大小：0.76MB的图像精灵，现在当我加载login页面加载图像，然后用户可以看到用户界面。 所以问题是我想它先显示用户界面，然后加载像AJAX背景的图像。
您可以预先加载您的图像精灵，方法是将其插入到login页面的最底部并使其不可见。 当浏览器parsing并呈现您的login页面时，它将遇到您的图片精灵并加载它，但不会显示它。 因为它在页面的末尾，所以不会干扰用户界面，用户将首先看到用户界面。
<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()); }); });
此外，不要忘记指示明确告诉浏览器，精灵可以被caching：
app.use(express.compress()); // optional app.use(express.static(app.root + '/app/public', { maxAge: 86400000 /* 1d */ }));
服务器只能提供用户请求的内容。 caching由浏览器完成，以减less文件传输（页面需求）并提高性能。
要进行caching，浏览器必须至less请求一次文件。 之后它检查文件是否被更新。 如果文件在服务器上发生了变化，则caching被放弃，否则使用caching。 如果你想caching所有的图像，只需将它们包含在你的login页面。 之后，这些文件的每个请求都会打到caching。 要知道您的文件正在节点中caching检查日志。
//First access GET /stylesheets/style.css 200 1270ms //Thereafter from cache GET /stylesheets/style.css 304 6ms
不要担心caching，让浏览器处理它。
- 在Node.js中用fs.createReadStreamreplacefs.readFile
- 节点JsmeteorJs图像file upload图像损坏
- 在Node.js中如何将multipart / form-data上传的图像转换为base64格式
- 在图像中查找类似颜色的区域
- 在node.js和graphicsmagick中创build带有背景的透明图像
- dojo /使用NodeJS请求一个png图像数组缓冲区，并将图像返回给客户端
- imagemin error [TypeError：（input，output，opts）=> {
- Expressjs：res.download期间的图像文件编码问题
- 如何处理与webpack服务器端的静态资产？