预加载CSS图像
我有一个隐藏的联系表单，部署点击一个button。 它的字段被设置为CSS背景图像，并且它们总是比切换的div晚出现。
我在<head>部分使用了这个代码片段，但没有运气（在清除caching之后）：
<script> $(document).ready(function() { pic = new Image(); pic2 = new Image(); pic3 = new Image(); pic.src="<?php bloginfo('template_directory'); ?>http://img.dovov.cominputs/input1.png"; pic2.src="<?php bloginfo('template_directory'); ?>http://img.dovov.cominputs/input2.png"; pic3.src="<?php bloginfo('template_directory'); ?>http://img.dovov.cominputs/input3.png"; }); </script>
我使用jQuery作为我的库，如果我可以用它来解决这个问题，这将是很酷的。
感谢您的尽pipe。
只使用CSS预载图像
body::after{ position:absolute; width:0; height:0; overflow:hidden; z-index:-1; content:url(img01.png) url(img02.png) url(img03.png) url(img04.png); }
演示
最好使用精灵图像来减lesshttp请求…
（如果有许多相对较小尺寸的图像）
我可以确认我的原始代码似乎工作。 我随意地粘着一个错误的path图像。
这是一个testing： http : //paragraphe.org/slidetoggletest/test.html
<script> pic = new Image(); pic2 = new Image(); pic3 = new Image(); pic.src="images/inputs/input1.png"; pic2.src="images/inputs/input2.png"; pic3.src="images/inputs/input3.png"; </script>
http://css-tricks.com/snippets/css/css-only-image-preloading/
技术＃1
将图像加载到元素的常规状态，只能将其移动到背景位置。 然后移动背景位置以在hover上显示它。
#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 }
有了这个代码，你可以预加载背景图片，并在加载时渲染表单
如果您在网站的其他任何位置重新使用这些bg图像作为表单input，则可能需要使用图像精灵。 这样，你可以集中pipe理你的图片（而不是有pic1，pic2，pic3等）。
客户端的精灵通常更快，因为他们只从服务器请求一个（尽pipe稍大）的文件，而不是多个文件。 看到SO文章更多的好处：
CSS图像精灵
再次，这可能不会有所帮助，如果你只是使用这些为一个窗体，你真的只想要加载它们，如果用户请求联系表单…可能是有道理的。
为了预加载用CSS设置的背景图像，我想到的最有效的答案是我发现一些代码的修改版本没有工作：
$(':hidden').each(function() { var backgroundImage = $(this).css("background-image"); if (backgroundImage != 'none') { tempImage = new Image(); tempImage.src = backgroundImage; } });
这样做的巨大好处就是，当你在将来引入新的背景图片时，你不需要更新它，它会find新的背景图片并预先加载它们！
如何加载隐藏在某处的背景图片。 这样，当页面打开时，它将被加载，并且一旦使用ajax创build了表单，将不需要任何时间：
body { background: #ffffff url('img_tree.png') no-repeat -100px -100px; }
你可以使用这个jQuery的插件waitForImage或者你可以把你的图像到一个隐藏的div或（宽度：0和高度：0），并在图像上使用onload事件。
如果你只有2-3个图像，你可以绑定事件，并在一个链中触发它们，所以在每个图像之后，你可以做一些代码。
使用HTML <link>标记预载图像
我相信这个问题的大部分访问者都在寻找“在页面呈现开始之前如何预先加载图片”的答案。 这个问题的最佳解决scheme是使用<link>标签，因为<link>标签能够阻止页面的进一步渲染。 看抢先
这两个rel值的选项（ 当前文档和链接文档之间的关系 ）属性与问题最为相关：
- 预取 ：在页面渲染时加载给定的资源
- 预加载 ：在页面呈现开始之前加载给定的资源
所以如果你想在 <body>标签的渲染过程开始之前加载一个资源（ 在这种情况下是一个图片 ），请使用：
<link rel="preload" as="image" href="IMAGE_URL">
如果你想在<body>渲染的时候加载一个资源，但是你打算以后dynamic使用它，并且不想打扰用户加载时间，那么使用：
<link rel="prefetch" href="RESOURCE_URL">
如果页面元素和它们的背景图像已经在DOM中（也就是说，你没有dynamic地创build/改变它们），那么它们的背景图像已经被加载了。 在这一点上，你可能想看看压缩方法:)
唯一的方法是Base64对图像进行编码并将其放置在HTML代码中，以便它不需要联系服务器来下载图像。
这将编码从url的图像，所以你可以复制图像文件的代码，并插入到你的网页，就像这样…
body { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...); }
如果没有办法修改CSS代码并使用CSS规则预加载图像:before或:after pseudo元素:after ，可以使用JavaScript代码遍历加载样式表的CSS规则的另一种方法。 为了使其工作脚本应该包含在HTML 样式表之后 ，例如，在closuresbody标签之前或样式表之后。
getUrls() { const urlRegExp = /url\(('|")?([^'"()]+)('|")\)?/; let urls = []; for (let i = 0; i < document.styleSheets.length; i++) { let cssRules = document.styleSheets[i].cssRules; for (let j = 0; j < cssRules.length; j++) { let cssRule = cssRules[j]; if (!cssRule.selectorText) { continue; } for (let k = 0; k < 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 => { let urls = getUrls(), loadedCount = 0; const onImageLoad = () => { loadedCount++; if (urls.length === loadedCount) { resolve(); } }; for (var i = 0; i < urls.length; i++) { let image = new Image(); image.src = urls[i]; image.onload = onImageLoad; } }); } document.addEventListener('DOMContentLoaded', () => { preloadImages().then(() => { // CSS images are loaded here }); });
