在jQuery中在后台引入HTML资源 [英] Pull in HTML resource in the background in jQuery

问题描述

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

On a page, there is a button. When the button is clicked, a dropdown shows up. The dropdown contains an image. The problem is that the image is not fetched until the user clicks the button.

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

我想在页面加载时获取图像，以便在用户点击时准备好了下拉列表。我怎样才能做到这一点？我以为我可以用 display：none set将图像插入到页面中，所以它会进入缓存，或者有没有办法在文档中加载在jQuery中加载？

I'd like to fetch the image when the page loads so it's ready to go when the user clicks the dropdown. How can I do this? I was thinking I could insert the image into the page with display:none set, so it'll get in the cache, or is there a way to load in when the document loads in jQuery?

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

This is for a Chrome extension, if it makes any difference. I suppose I could put the image in the extension (and that would be faster), but I'm still curious if it's possible to load the image using JS.

谢谢，
Kevin

Thanks, Kevin

推荐答案

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

Yes. Just define it as a new image in the ready() call of the page:

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

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

Then when you use it, it will already be in the browser's cache. You can use the variable or just reference it the same way you already are.

这篇关于在jQuery中在后台引入HTML资源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！