blocks|key|1247066|text|如果页面元素和它们的背景图像已经在DOM中(即您没有动态地创建/更改它们)，那么它们的背景图像将已经被加载。在这一点上，您可能需要查看压缩方法:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1247067|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

If the page elements and their background images are already in the DOM (i.e. you are not creating/changing them dynamically), then their background images will already be loaded. At that point, you may want to look at compression methods :)

blocks|key|1247096|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1247097|var+c=new+Image("Path+to+the+background+image");
c.onload=function(){
+++//render+the+form
}|code-block|syntax|javascript|1247098|使用此代码，您可以预加载背景图像，并在加载时呈现窗体|1247099|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

try with this:

<pre><code>var c=new Image("Path to the background image");
c.onload=function(){
 //render the form
}
</code></pre>

With this code you preload the background image and render the form when it's loaded

blocks|key|1247134|text|在隐藏的地方加载背景图像怎么样。这样，它将在页面打开时加载，并且在使用ajax创建表单时不会花费任何时间：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1247135|body+{
background:+#ffffff+url('img_tree.png')+no-repeat+-100px+-100px;
}|code-block|syntax|javascript|1247136|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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:

<pre><code>body {
background: #ffffff url('img_tree.png') no-repeat -100px -100px;
}
</code></pre>

blocks|key|1247194|text|我可以确认我的原始代码似乎可以工作。我随随便便地坚持走错了路的图像。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1247195|下面是一个测试：http://paragraphe.org/slidetoggletest/test.html|offset|length|1247196|<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>|code-block|syntax|javascript|1247197|entityMap|0|LINK|mutability|MUTABLE|url|http://paragraphe.org/slidetoggletest/test.html^0|0|8|1B|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

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 : <a href="http://paragraphe.org/slidetoggletest/test.html" rel="noreferrer">http://paragraphe.org/slidetoggletest/test.html</a>

<pre><code>&lt;script&gt;
 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";
&lt;/script&gt;
</code></pre>

blocks|key|1247249|text|如果您在站点上的任何其他地方重用这些bg图像作为表单输入，那么您可能希望使用图像sprite。这样，您就可以集中管理您的映像(而不是使用pic1、pic2、pic3等)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1247250|对于客户端来说，Sprite通常更快，因为它们只从服务器请求一个(尽管略大)文件，而不是多个文件。有关更多好处，请参阅SO文章：|1247251|CSS+image+sprites|offset|length|1247252|但是，如果您只是将它们用于一个表单，并且您真的只想在用户请求联系人form...might有意义的情况下加载它们，那么这可能一点帮助都没有。|1247253|http://www.alistapart.com/articles/sprites|1247254|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/1289372/css-image-sprites|1^0|0|0|0|H|0|0|0|0|16|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@$F|X|G|Y|1|Z]]|A|$]]|$1|H|3|I|5|6|7|10|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|11|8|@]|9|@$F|12|G|13|1|14]]|A|$]]|$1|L|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]|T|$5|O|P|Q|A|$R|K]]]]

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...). 

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:

<a href="https://stackoverflow.com/questions/1289372/css-image-sprites">CSS image sprites</a>

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.

<a href="http://www.alistapart.com/articles/sprites" rel="nofollow noreferrer">http://www.alistapart.com/articles/sprites</a>

blocks|key|1247314|text|唯一的方法是对图像进行Base64编码，并将其放入HTML代码中，这样就不需要联系服务器来下载图像了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1247315|This将对url中的图像进行编码，这样您就可以复制图像文件代码并将其插入到页面中，如下所示……|offset|length|1247316|body+{
++background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}|code-block|syntax|javascript|1247317|entityMap|0|LINK|mutability|MUTABLE|url|http://www.greywyvern.com/code/php/binary2base64^0|0|0|4|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

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. 

<a href="http://www.greywyvern.com/code/php/binary2base64" rel="nofollow">This</a> will encode an image from url so you can copy the image file code and insert it in your page like so...

<pre><code>body {
 background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}
</code></pre>

blocks|key|1462023|text|您可以使用此jQuery插件waitForImage，也可以将图像放入隐藏的div或(宽度:0和高度:0)中，然后对图像使用onload事件。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1462024|如果你只有2-3个图像，你可以绑定事件并触发它们，所以在每个图像之后，你可以做一些代码。|1462025|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/alexanderdickson/waitForImages/blob/master/jquery.waitforimages.js^0|E|C|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

You could use this jQuery plugin <a href="https://github.com/alexanderdickson/waitForImages/blob/master/jquery.waitforimages.js" rel="nofollow">waitForImage</a> or you could put you images into an hidden div or (width:0 and height:0) and use onload event on images. 

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.

blocks|key|1462077|text|对于用CSS设置的预加载背景图像，我想出的最有效的答案是一些我发现不起作用的代码的修改版本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1462078|$(':hidden').each(function()+{
++var+backgroundImage+=+$(this).css("background-image");
++if+(backgroundImage+!=+'none')+{
++++tempImage+=+new+Image();
++++tempImage.src+=+backgroundImage;
++}
});|code-block|syntax|javascript|1462079|这样做的巨大好处是，当你在未来引入新的背景图像时，你不需要更新它，它会找到新的并预加载它们！|1462080|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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:

<pre><code>$(':hidden').each(function() {
 var backgroundImage = $(this).css("background-image");
 if (backgroundImage != 'none') {
 tempImage = new Image();
 tempImage.src = backgroundImage;
 }
});
</code></pre>

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!

blocks|key|1247474|text|当无法使用针对:before或:after伪元素的CSS规则修改CSS代码和预加载图像时，可以使用另一种方法，即使用JavaScript代码遍历已加载样式表的CSS规则。为了使它在超文本标记语言中工作，例如，在关闭body标记之前或紧跟在样式表之后。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1247475|getUrls()+{
++++const+urlRegExp+=+/url$('%7C")?([%5E'"()]%2B)('%7C")$?/;

++++let+urls+=+[];
++++for+(let+i+=+0;+i+<+document.styleSheets.length;+i%2B%2B)+{
++++++++let+cssRules+=+document.styleSheets[i].cssRules;
++++++++for+(let+j+=+0;+j+<+cssRules.length;+j%2B%2B)+{
++++++++++++let+cssRule+=+cssRules[j];
++++++++++++if+(!cssRule.selectorText)+{
++++++++++++++++continue;
++++++++++++}

++++++++++++for+(let+k+=+0;+k+<+cssRule.style.length;+k%2B%2B)+{
++++++++++++++++let+property+=+cssRule.style[k],
++++++++++++++++++++urlMatch+=+cssRule.style[property].match(urlRegExp);
++++++++++++++++if+(urlMatch+!==+null)+{
++++++++++++++++++++urls.push(urlMatch[2]);
++++++++++++++++}
++++++++++++}
++++++++}
++++}
++++return+urls;
}

preloadImages()+{
++++return+new+Promise(resolve+=>+{
++++++++let+urls+=+getUrls(),
++++++++++++loadedCount+=+0;

++++++++const+onImageLoad+=+()+=>+{
++++++++++++loadedCount%2B%2B;
++++++++++++if+(urls.length+===+loadedCount)+{
++++++++++++++++resolve();
++++++++++++}
++++++++};

++++++++for+(var+i+=+0;+i+<+urls.length;+i%2B%2B)+{
++++++++++++let+image+=+new+Image();
++++++++++++image.src+=+urls[i];
++++++++++++image.onload+=+onImageLoad;
++++++++}
++++});
}

document.addEventListener('DOMContentLoaded',+()+=>+{
++++preloadImages().then(()+=>+{
++++++++//+CSS+images+are+loaded+here
++++});
});|code-block|syntax|javascript|1247476|entityMap^0|7|7|F|6|2Z|4|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|L|$]]

When there is no way to modify CSS code and preload images with CSS rules for <code>:before</code> or <code>:after</code> pseudo elements another approach with JavaScript code traversing CSS rules of loaded stylesheets can be used. In order to make it working <a href="http://molily.de/domcontentloaded/" rel="nofollow">scripts should be included after stylesheets</a> in HTML, for example, before closing <code>body</code> tag or just after stylesheets.

<pre><code>getUrls() {
 const urlRegExp = /url$('|")?([^'"()]+)('|")$?/;

 let urls = [];
 for (let i = 0; i &lt; document.styleSheets.length; i++) {
 let cssRules = document.styleSheets[i].cssRules;
 for (let j = 0; j &lt; cssRules.length; j++) {
 let cssRule = cssRules[j];
 if (!cssRule.selectorText) {
 continue;
 }

 for (let k = 0; k &lt; cssRule.style.length; k++) {
 let property = cssRule.style[k],
 urlMatch = cssRule.style[property].match(urlRegExp);
 if (urlMatch !== null) {
 urls.push(urlMatch[2]);
 }
 }
 }
 }
 return urls;
}

preloadImages() {
 return new Promise(resolve =&gt; {
 let urls = getUrls(),
 loadedCount = 0;

 const onImageLoad = () =&gt; {
 loadedCount++;
 if (urls.length === loadedCount) {
 resolve();
 }
 };

 for (var i = 0; i &lt; urls.length; i++) {
 let image = new Image();
 image.src = urls[i];
 image.onload = onImageLoad;
 }
 });
}

document.addEventListener('DOMContentLoaded', () =&gt; {
 preloadImages().then(() =&gt; {
 // CSS images are loaded here
 });
});
</code></pre>

blocks|key|1247611|text|我也想添加一些小通知。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1247612|如果您不在网络选项卡的dev控制台设置中禁用缓存，请回答“仅使用CSS预加载图像”。否则，它将加倍加载图像。|1247613|​|1247614|📷|atomic|offset|length|1247615|1247616|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/42d619cad4983f94dcc371872ce11467.png|imageAlt^0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@$I|Y|J|Z|1|10]]|A|$]]|$1|K|3|E|5|6|7|11|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S|T|-4]]]]

I also would like add small notice.
Answer &quot;Preloading images using CSS only&quot; perfectly works if you do not disable the cache in dev console settings at the network tab.
Otherwise it will double load the images.
<a href="https://i.stack.imgur.com/pFHIz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pFHIz.png" alt="enter image description here" /></a>

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.

I was using this snippet in the <code>&lt;head&gt;</code> section, but with no luck (after I cleared the cache) :

<pre><code>&lt;script&gt;
$(document).ready(function() {
 pic = new Image();
 pic2 = new Image();
 pic3 = new Image();
 pic.src="&lt;?php bloginfo('template_directory'); ?&gt;/images/inputs/input1.png";
 pic2.src="&lt;?php bloginfo('template_directory'); ?&gt;/images/inputs/input2.png";
 pic3.src="&lt;?php bloginfo('template_directory'); ?&gt;/images/inputs/input3.png";
});
&lt;/script&gt;
</code></pre>

I'm using jQuery as my library, and it would be cool if I could use it as well for arranging this issue.

Thanks for your thoughs.

Preloading CSS Images

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个隐藏的联系人表单，这是部署在一个按钮上。它的字段被设置为CSS背景图像，并且它们总是比已切换的div显示稍晚一点。我在<head>部分使用了这段代码，但没有成功(在我清除缓存之后)：<script>$(document).ready(function() { pic = new Image(); ...

问预加载CSS图像
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问预加载CSS图像EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问预加载CSS图像
EN