gpt4 book ai didi

image - 从 Node.js 应用程序传递图像的最佳方式(使用 Express)

转载 作者:太空宇宙 更新时间:2023-11-03 22:42:57 24 4
gpt4 key购买 nike

我们设置了一个公共(public)文件夹,其中包含 50 个可移植网络图形格式的小图像,基本上是用于工具栏设计的(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的图像 Sprite ,现在当我加载 Sign-在页面中它加载图像,然后用户可以看到 UI。所以问题是我希望它首先显示 UI,然后在后台加载图像(例如 AJAX)。

<小时/>

最佳答案

您可以通过将图像 Sprite 插入登录页面的最底部并使其不可见来预加载图像 Sprite 。当浏览器解析和渲染您的登录页面时,它将遇到您的图像 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告诉浏览器可以缓存 Sprite :

app.use(express.compress()); // optional
app.use(express.static(app.root + '/app/public', { maxAge: 86400000 /* 1d */ }));

关于image - 从 Node.js 应用程序传递图像的最佳方式(使用 Express),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15199727/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com