预加载 CSS 图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1373142/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Preloading CSS Images
提问by Peanuts
I have a hidden contact form which is deployed clicking on a button. Its fields are set as CSS background images, and they always appears a bit later than the div that have been toggled.
我有一个隐藏的联系表单，单击按钮即可部署。它的字段被设置为 CSS 背景图像，它们总是比被切换的 div 晚一点出现。
I was using this snippet in the <head>section, but with no luck (after I cleared the cache) :
我在本<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>
I'm using jQuery as my library, and it would be cool if I could use it as well for arranging this issue.
我使用 jQuery 作为我的库，如果我也可以使用它来安排这个问题会很酷。
Thanks for your thoughs.
谢谢你的想法。
采纳答案by Peanuts
I can confirm that my original code seems to work. I was casually sticking to an image with a wrong path.
我可以确认我的原始代码似乎有效。我随意地坚持一个错误路径的图像。
Here's a test : http://paragraphe.org/slidetoggletest/test.html
这是一个测试：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>
回答by vsync
Preloading images using CSS only
仅使用 CSS 预加载图像
In the below code I am randomly choosing the bodyelement, since it is one of the only elements guaranteed to exist on the page.
在下面的代码中，我随机选择了body元素，因为它是保证存在于页面上的唯一元素之一。
For the "trick" to work, we shall use the contentproperty which comfortably allows setting multipleURLs to be loaded, but as shown, the ::afterpseudo element is kept hiddenso the images won't be rendered:
为了使“技巧”起作用，我们将使用content允许设置多个要加载的 URL的属性，但如图所示，::after伪元素保持隐藏状态，因此不会呈现图像：
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
}
Demo
演示
it's better to use a sprite imageto reduce http requests...(if there are many relatively small sized images) and make sure the images are hosted where HTTP2is used.
回答by mertyildiran
Preloading images using HTML <link> Tag
使用 HTML <link> 标签预加载图像
I believe most of the visitors of this question are looking for the answer of "How can I preload an image before the page's render starts?"and the best solution for this problem is using <link>tag because <link>tag is capable to block the further rendering of the page. See preemptive
我相信这个问题的大多数访问者都在寻找“如何在页面渲染开始之前预加载图像？”的答案。这个问题的最佳解决方案是使用<link>标签，因为<link>标签能够阻止页面的进一步呈现。见先发制人
These two value options of rel(relationship between the current document and the linked document) attribute are most relevant with the issue:
rel（当前文档和链接文档之间的关系）属性的这两个值选项与问题最相关：
- prefetch: load the given resource while page rendering
- preload: load the given resource before page rendering starts
- prefetch: 在页面渲染时加载给定的资源
- preload: 在页面渲染开始之前加载给定的资源
So if you want to load a resource (in this case it's an image) before the rendering process of <body>tag starts, use:
所以如果你想在<body>标签的渲染过程开始之前加载一个资源（在这种情况下它是一个图像），请使用：
<link rel="preload" as="image" href="IMAGE_URL">
and if you want to load a resource while <body>is rendering but you are planning to use it later on dynamically and don't wanna bother the user with loading time, use:
如果您想在<body>渲染时加载资源，但您打算稍后动态使用它并且不想在加载时间上打扰用户，请使用：
<link rel="prefetch" href="RESOURCE_URL">
回答by Fatih Hayrio?lu
http://css-tricks.com/snippets/css/css-only-image-preloading/
http://css-tricks.com/snippets/css/css-only-image-preloading/
Technique #1
技术#1
Load the image on the element's regular state, only shift it away with background position. Then move the background position to display it on hover.
在元素的常规状态上加载图像，仅将其与背景位置移开。然后移动背景位置以在悬停时显示它。
#grass { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background-position: bottom left; }
Technique #2
技术#2
If the element in question already has a background-image applied and you need to change that image, the above won't work. Typically you would go for a sprite here (a combined background image) and just shift the background position. But if that isn't possible, try this. Apply the background image to another page element that is already in use, but doesn't have a background image.
如果相关元素已经应用了背景图像并且您需要更改该图像，则上述方法将不起作用。通常你会在这里寻找一个精灵（一个组合的背景图像）并改变背景位置。但如果这是不可能的，试试这个。将背景图像应用于另一个已在使用但没有背景图像的页面元素。
#random-unsuspecting-element { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background: url(images/grass.png) no-repeat; }
回答by mck89
try with this:
试试这个：
var c=new Image("Path to the background image");
c.onload=function(){
//render the form
}
With this code you preload the background image and render the form when it's loaded
使用此代码，您可以预加载背景图像并在加载时呈现表单
回答by Deminetix
For preloading background images set with CSS, the most efficient answer i came up with was a modified version of some code I found that did not work:
对于使用 CSS 设置的预加载背景图像，我想出的最有效的答案是我发现某些代码的修改版本不起作用：
$(':hidden').each(function() {
var backgroundImage = $(this).css("background-image");
if (backgroundImage != 'none') {
tempImage = new Image();
tempImage.src = backgroundImage;
}
});
The massive benefit of this is that you don't need to update it when you bring in new background images in the future, it will find the new ones and preload them!
这样做的巨大好处是，当您将来引入新的背景图像时，您无需更新它，它会找到新的背景图像并预加载它们！
回答by ajhit406
If you're reusing these bg images anywhere else on your site for form inputs, you probably want to use an image sprite. That way you can centrally manage your images (instead of having pic1, pic2, pic3, etc...).
如果您在站点的任何其他位置重复使用这些 bg 图像进行表单输入，您可能想要使用图像精灵。这样您就可以集中管理您的图像（而不是拥有 pic1、pic2、pic3 等...）。
Sprites are generally faster for the client, since they are only requesting one (albeit slightly larger) file from the server instead of multiple files. See SO article for more benefits:
对于客户端来说，精灵通常更快，因为它们只从服务器请求一个（尽管稍大）文件而不是多个文件。有关更多好处，请参阅 SO 文章：
Then again, this might not be helpful at all if you're just using these for one form and you really only want to load them if the user requests the contact form...might make sense though.
再说一次，如果您只是将这些用于一个表单，并且您真的只想在用户请求联系表单时加载它们，那么这可能根本没有帮助……不过可能有意义。
回答by mheager
The only way is to Base64 encode the image and place it inside the HTML code so that it doesn't need to contact the server to download the image.
唯一的方法是对图像进行 Base64 编码并将其放置在 HTML 代码中，这样它就不需要联系服务器来下载图像。
Thiswill encode an image from url so you can copy the image file code and insert it in your page like so...
这将对来自 url 的图像进行编码，以便您可以复制图像文件代码并将其插入到您的页面中，就像这样......
body {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}
回答by user1236048
You could use this jQuery plugin waitForImageor you could put you images into an hidden div or (width:0 and height:0) and use onload event on images.
您可以使用这个 jQuery 插件waitForImage或者您可以将图像放入隐藏的 div 或 (width:0 and height:0) 并在图像上使用 onload 事件。
If you only have like 2-3 images you can bind events and trigger them in a chain so after every image you can do some code.
如果您只有 2-3 张图像，您可以绑定事件并在链中触发它们，因此在每张图像之后您都可以执行一些代码。
回答by Santi
how about loading that background image somewhere hidden. That way it will be loaded when the page is opened and wont take any time once the form is created using ajax:
如何在隐藏的地方加载该背景图像。这样它将在页面打开时加载，并且一旦使用 ajax 创建表单就不会花费任何时间：
body {
background: #ffffff url('img_tree.png') no-repeat -100px -100px;
}
