在 jQuery 后台拉取 HTML 资源

Question

在一个页面上，有一个按钮。单击该按钮时，会出现一个下拉菜单。下拉列表包含一个图像。问题是在用户单击按钮之前不会获取图像。

$("#my_button").click(function(){
    $("#my_dropdown").html("<img src=\"http://mysite.com/image.jpg\" />"); 
});

我想在页面加载时获取图像，以便当用户单击下拉菜单时它就可以使用了。我该怎么做？我想我可以将图像插入到设置了 display:none 的页面中，这样它就会进入缓存，或者有没有办法在 jQuery 中加载文档时加载？

如果有什么区别的话，这是针对 Chrome 扩展的。我想我可以将图像放在扩展中（这样会更快），但我仍然很好奇是否可以使用 JS 加载图像。

谢谢， 凯文

Answer 1

是的。只需在页面的ready()调用中将其定义为新图像：

$(document).ready( function() {
     var preload = new Image();
     preload.src = "http://mysite.com/image.jpg";
});

然后当您使用它时，它就已经在浏览器的缓存中了。您可以使用该变量，也可以按照现有的方式引用它。

Answer 2

您可以预加载每个图像...

$(document).ready(function() {
    (new Image()).src  =  '/path/to/myImage.jpg';
});