在jQuery中在后台引入HTML资源

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

$("#my_button").click(function(){ $("#my_dropdown").html(""); }); 

我想在页面加载时获取图像，以便在用户单击下拉列表时准备好。 我怎样才能做到这一点？ 我以为我可以使用display:none set将图像插入到页面中，所以它会进入缓存，或者有什么方法可以在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'; });