Pea*_*uts 106 css background image preloader preload
我有一个隐藏的联系表单,单击按钮部署.它的字段设置为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作为我的库,如果我能用它来安排这个问题,那将会很酷.
谢谢你的支持.
vsy*_*ync 236
body::after{
position:absolute; width:0; height:0; overflow:hidden; z-index:-1; // hide images
content:url(img1.png) url(img2.png) url(img3.gif) url(img4.jpg); // load images
}
最好使用精灵图像来减少http请求...
(如果有很多相对较小的图像)
Pea*_*uts 27
我可以确认我的原始代码似乎有效.我随便坚持一个错误的路径图像.
这是一个测试: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>
mer*_*ran 18
我相信这个问题的大多数访问者都在寻找"如何在页面渲染开始之前预加载图像？"的答案.此问题的最佳解决方案是使用<link>标记,因为<link>标记能够阻止进一步呈现页面.见先发制人
这两个值选项rel(当前文档和链接文档之间的关系)属性与问题最相关:
因此,如果要在<body>标记启动过程之前加载资源(在本例中为图像),请使用:
<link rel="preload" as="image" href="IMAGE_URL">
如果你想在<body>渲染时加载资源,但是你打算在以后动态使用它,并且不想用加载时间来打扰用户,请使用:
<link rel="prefetch" href="RESOURCE_URL">
Fat*_*ğlu 13
http://css-tricks.com/snippets/css/css-only-image-preloading/
技术#1
将图像加载到元素的常规状态,仅将其移出背景位置.然后移动背景位置以在悬停时显示它.
#grass { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background-position: bottom left; }
技术#2
如果相关元素已经应用了背景图像,并且您需要更改该图像,则上述操作无效.通常你会在这里寻找一个精灵(合成的背景图像),然后移动背景位置.但如果这是不可能的,试试这个.将背景图像应用于另一个已在使用的页面元素,但没有背景图像.
#random-unsuspecting-element { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background: url(images/grass.png) no-repeat; }
试试这个:
var c=new Image("Path to the background image");
c.onload=function(){
//render the form
}
使用此代码,您可以预加载背景图像并在加载时渲染表单
对于预加载使用CSS设置的背景图片，我想出的最有效的答案是我发现某些代码的修改版本不起作用：
$(':hidden').each(function() {
var backgroundImage = $(this).css("background-image");
if (backgroundImage != 'none') {
tempImage = new Image();
tempImage.src = backgroundImage;
}
});
这样做的巨大好处是，当您将来引入新的背景图像时，您不需要更新它，它将找到新的背景图像并将其预加载！
如果您在网站的任何其他位置重复使用这些bg图像进行表单输入,则可能需要使用图像精灵.这样你就可以集中管理你的图像(而不是pic1,pic2,pic3等......).
对于客户端来说,精灵通常更快,因为它们只从服务器请求一个(尽管稍大)文件而不是多个文件.有关更多好处,请参阅SO文章:
再说一遍,如果您只是将这些用于一个表单,并且您真的只想在用户请求联系表单时加载它们,那么这可能根本不会有用......虽然可能有意义.
http://www.alistapart.com/articles/sprites
| 归档时间： |
|
| 查看次数： |
106491 次 |
| 最近记录： |