javascript - 在 jQuery 的后台拉入 HTML 资源

Question

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

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

我想在页面加载时获取图像，以便在用户单击下拉菜单时准备就绪。我怎样才能做到这一点？我在想我可以将图像插入到带有display:none集合的页面中，所以它会进入缓存，或者当文档在 jQuery 中加载时有没有办法加载？

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

谢谢，凯文

score 7 · Accepted Answer

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

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

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

score 6 · Accepted Answer

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

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

2 回答 2