在jQuery中在后台引入HTML资源

Question

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

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

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