Amo*_*rni 1 performance image node.js express
我们设置了一个公共文件夹,其中包含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概念.但我需要不同的解决方案来缓存尚未请求的图像.
有没有人能说明如何做到这一点？
您可以通过将其插入登录页面的最底部并使其不可见来预加载图像精灵.当浏览器正在解析并呈现您的登录页面时,它将遇到您的图像精灵并加载它但不会显示它.因为它位于页面的末尾,所以它不会干扰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 */ }));
| 归档时间： |
|
| 查看次数： |
5226 次 |
| 最近记录： |