javascript - 在 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";
});

那么当你使用它的时候，它已经在浏览器的缓存中了。您可以使用该变量，也可以像现在一样引用它。