所以我的<img>页面上有一个标签。
<img id="the_image" src="/imageServlet">
让我们假设 /imageServlet 正在响应一些 HTTP 响应标头，这些标头指示浏览器永远不应缓存此图像。在这种情况下，原因是图像可能包含敏感的员工信息，并且某些国家/地区的法律规定浏览器不应（未经用户同意）将图像保存在客户端的硬盘上，以防机器被盗。我相信响应头是Cache-Control: no-cache
我真正想做的就是复制这个图像标签，但我不希望为这个图像发出另一个 HTTP 请求。
我的应用程序是一个页面，使用 javascript 我动态地显示这些图像标签 - 但现在我想在多个地方显示相同的图像。例如，图像可以是用户个人资料图片的缩略图版本。在一个地方，我将缩略图显示为一个小列表，然后当您单击该用户时，我会在弹出窗口中显示相同的图像。
每次我<img>用这个 src 创建一个新标签时，浏览器都会重新调用服务器来检索图像。我不在乎用户是否在浏览器上按下“刷新”并且应该加载对该图像的新 HTTP 请求 - 但在单个页面加载中，图像数据不应该在内存中可用，所以我不能重用这个？
我怎样才能解决这个问题？这极大地影响了页面的性能，其中图像被重用并显示在多个位置，并且每次都需要重新加载（即使用户没有导航到任何其他页面或刷新浏览器）。
这是我刚刚编写的一些代码，其中任何时候应用程序想要加载图像时，它都会调用“loadImage”，最终会使用一些可以自由使用的 HTML 元素调用回调。这个想法是这个中心函数将创建图像，但它会确保对于任何唯一的src只有一个 HTTP 请求将被发出 - 无论 HTTP 响应标头是否包含Cache-Control: no-cache。
(function(){
var HANDLERS = {};
/**
* I want to keep around a cached "Image" then the "callback" will be called with a
* duplicate somehow - whatever comes back from here can be inserted somewhere, but
* hopefully no additional HTTP requests needs to be made!!
* @param {Image} img
* @return {Image} A copy of the incoming img
*/
function duplicateImage(img) {
// Does not work!! D'oh, is this even possible to achieve??
return img.cloneNode(true);
}
/**
* Users can call this to load the image. The callback is called when the image is ready.
* In case the image fails the callback will be given an object that contains a success flag.
*
* Example:
* loadImage('/imageServlet?xxxx', function(result) {
* if (result.success) { $(body).append(result.image); }
* else { console.log("The image failed to load!") }
* });
*
* @param {string} src The src for the image
* @param {function({success:boolean, image:Image})} callback Give a callback to be called when ready
*/
window.loadImage = function(src, callback) {
if (!HANDLERS[src]) {
var queue = [];
// This loadImage can be called more than once with the same src
// before the image has successfully loaded. We will queue up any
// callbacks and call them later, then replace this with function
// that will directly invoke the callback later.
HANDLERS[src] = function(callback) {
queue.push(callback);
}
// Create the image here, but do it only once!!
var el = new Image();
// When the image loads, we will keep it around in the el
// variable, but the callback will be called with a copy
el.onload = function() {
el.onload = el.onerror = null;
var call = HANDLERS[src] = function(callback) {
callback({
success: true,
image: duplicateImage(el) // This is where the image is duplicated!
});
}
for (var i=0; i<queue.length; i++) {
call(queue[i]);
}
}
// This is just in case the image fails to load. Call any
// queued callbacks with the success false.
el.onerror = function() {
el.onload = el.onerror = null;
var call = HANDLERS[src] = function(callback) {
callback({success: false});
}
for (var i=0; i<queue.length; i++) {
call(queue[i]);
}
}
el.src = src;
}
HANDLERS[src](callback);
}
})();