预加载CSS图像
预加载CSS图像
提问于 2009-09-03 12:34:53
我有一个隐藏的联系人表单，这是部署在一个按钮上。它的字段被设置为CSS背景图像，并且它们总是比已切换的div显示稍晚一点。
我在<head>部分使用了这段代码，但没有成功(在我清除缓存之后)：
<script>
$(document).ready(function() {
pic = new Image();
pic2 = new Image();
pic3 = new Image();
pic.src="<?php bloginfo('template_directory'); ?>/images/inputs/input1.png";
pic2.src="<?php bloginfo('template_directory'); ?>/images/inputs/input2.png";
pic3.src="<?php bloginfo('template_directory'); ?>/images/inputs/input3.png";
});
</script>我正在使用jQuery作为我的库，如果我也可以使用它来安排这个问题，那就太酷了。
谢谢你的想法。
回答 10
Stack Overflow用户
回答已采纳
发布于 2009-09-03 17:52:58
我可以确认我的原始代码似乎可以工作。我随随便便地坚持走错了路的图像。
下面是一个测试：http://paragraphe.org/slidetoggletest/test.html
<script>
var pic = new Image();
var pic2 = new Image();
var pic3 = new Image();
pic.src="images/inputs/input1.png";
pic2.src="images/inputs/input2.png";
pic3.src="images/inputs/input3.png";
</script>Stack Overflow用户
发布于 2009-09-03 12:51:35
试试这个：
var c=new Image("Path to the background image");
c.onload=function(){
//render the form
}使用此代码，您可以预加载背景图像，并在加载时呈现窗体
Stack Overflow用户
发布于 2012-10-19 12:07:33
对于用CSS设置的预加载背景图像，我想出的最有效的答案是一些我发现不起作用的代码的修改版本：
$(':hidden').each(function() {
var backgroundImage = $(this).css("background-image");
if (backgroundImage != 'none') {
tempImage = new Image();
tempImage.src = backgroundImage;
}
});这样做的巨大好处是，当你在未来引入新的背景图像时，你不需要更新它，它会找到新的并预加载它们！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1373142
复制相关文章
相似问题
腾讯云开发者
