我想要JS可访问的图片
你尝试过使用jQuery使用CSS吗？这非常有趣 - 你可以完全控制CSS元素的CRUD（创建、读取、更新、删除）。例如，在服务器端对图像进行调整大小：
$('#container').css('background', 'url(somepage.php?src=image_source.jpg'
+ '&w=' + $("#container").width()
+ '&h=' + $("#container").height() + '&zc=1');
令人惊讶的是，即使 JavaScript 等待整个页面加载，图像请求仍会发出新请求！这是 Firefox 和 Chrome 中已知的 bug，还是 jQuery ajax 做了一些不好的事情？
很明显，这不是浏览器的 bug。
计算机是确定性的，并且会按照您告诉它要做的事情来执行（而不是您希望它做的）。如果要缓存图像，则在服务器端完成。根据谁处理缓存，可以处理为：
- 服务器（如 IIS 或 Apache）缓存 - 通常缓存经常重复使用的内容（例如：5 秒内 2 次）
- 服务器端应用程序缓存 - 通常重用服务器自定义缓存或创建 精灵图像 等
- 浏览器缓存 - 服务器端向图像添加缓存标头，浏览器维护缓存
如果还不清楚，那我想澄清一下：您不应该使用 JavaScript 缓存图像。
理想情况下，我希望ajax根本不需要发出第二个请求，因为它正在请求完全相同的url。
你尝试做的是预加载图片。
Once an image has been loaded in any way into the browser, it will be
in the browser cache and will load much faster the next time it is
used whether that use is in the current page or in any other page as
long as the image is used before it expires from the browser cache.
So, to precache images, all you have to do is load them into the
browser. If you want to precache a bunch of images, it's probably best
to do it with javascript as it generally won't hold up the page load
when done from javascript. You can do that like this:
function preloadImages(array) {
if (!preloadImages.list) {
preloadImages.list = [];
}
for (var i = 0; i < array.length; i++) {
var img = new Image();
img.onload = function() {
var index = preloadImages.list.indexOf(this);
if (index !== -1) {
preloadImages.splice(index, 1);
}
}
preloadImages.list.push(img);
img.src = array[i];
}
}
preloadImages(["url1.jpg", "url2.jpg", "url3.jpg"]);
Then, once they've been preloaded like this via javascript, the browser will have them in its cache and you can just refer to the normal URLs in other places (in your web pages) and the browser will fetch that URL from its cache rather than over the network.
源代码：如何在Javascript中缓存图像
在这种情况下，为什么CSS和AJAX通常具有不同的缓存，好像浏览器对CSS和AJAX请求使用不同的缓存存储？
即使缺乏信息，也不要草率下结论！
One big reason to use image preloading is if you want to use an image
for the background-image of an element on a mouseOver or :hover event.
If you only apply that background-image in the CSS for the :hover
state, that image will not load until the first :hover event and thus
there will be a short annoying delay between the mouse going over that
area and the image actually showing up.
Technique #1 Load the image on the element's regular state, only shift it away with background position. Then move the background
position to display it on hover.
#grass { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background-position: bottom left; }
Technique #2 If the element in question already has a background-image applied and you need to change that image, the above
won't work. Typically you would go for a sprite here (a combined
background image) and just shift the background position. But if that
isn't possible, try this. Apply the background image to another page
element that is already in use, but doesn't have a background image.
#random-unsuspecting-element {
background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background: url(images/grass.png) no-repeat; }
The idea create new page elements to use for this preloading technique
may pop into your head, like #preload-001, #preload-002, but that's
rather against the spirit of web standards. Hence the using of page
elements that already exist on your page.
我认为我创建了一个更好的示例。这是代码：
$('div').load()不会触发事件，但是$('img').load()会触发事件。你知道有没有解决方法吗？背景图片是否完全与 JavaScript 可访问的对象分离？ - NoBugs