首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >预加载CSS图像

预加载CSS图像
EN

Stack Overflow用户
提问于 2009-09-03 12:34:53
回答 10查看 142.1K关注 0票数 134

我有一个隐藏的联系人表单,这是部署在一个按钮上。它的字段被设置为CSS背景图像,并且它们总是比已切换的div显示稍晚一点。

我在<head>部分使用了这段代码,但没有成功(在我清除缓存之后):

代码语言:javascript
复制
<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作为我的库,如果我也可以使用它来安排这个问题,那就太酷了。

谢谢你的想法。

EN

回答 10

Stack Overflow用户

回答已采纳

发布于 2009-09-03 17:52:58

我可以确认我的原始代码似乎可以工作。我随随便便地坚持走错了路的图像。

下面是一个测试:http://paragraphe.org/slidetoggletest/test.html

代码语言:javascript
复制
<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>
票数 33
EN

Stack Overflow用户

发布于 2009-09-03 12:51:35

试试这个:

代码语言:javascript
复制
var c=new Image("Path to the background image");
c.onload=function(){
   //render the form
}

使用此代码,您可以预加载背景图像,并在加载时呈现窗体

票数 10
EN

Stack Overflow用户

发布于 2012-10-19 12:07:33

对于用CSS设置的预加载背景图像,我想出的最有效的答案是一些我发现不起作用的代码的修改版本:

代码语言:javascript
复制
$(':hidden').each(function() {
  var backgroundImage = $(this).css("background-image");
  if (backgroundImage != 'none') {
    tempImage = new Image();
    tempImage.src = backgroundImage;
  }
});

这样做的巨大好处是,当你在未来引入新的背景图像时,你不需要更新它,它会找到新的并预加载它们!

票数 7
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/1373142

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档