预载 CSS 图像

我有一个隐藏的联系表单，这是部署点击一个按钮。它的字段被设置为 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 作为我的库，如果我也可以使用它来安排这个问题，那将会很酷。

谢谢你的关心。

155268 次浏览
小开

如果页面元素和它们的背景图像已经在 DOM 中(也就是说，您没有动态地创建/更改它们) ，那么它们的背景图像将已经被加载。在这一点上，您可能想看看压缩方法:)

小开

试试这个:

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

使用这段代码可以预加载背景图像，并在加载时呈现表单

小开

把背景图像藏起来怎么样。 这样，当页面打开时，它就会被加载，而且一旦使用 ajax 创建表单，它就不会花费任何时间:

body {
background: #ffffff url('img_tree.png') no-repeat -100px -100px;
}
小开
最佳答案

我可以确认我的原始代码似乎工作。我漫不经心地坚持着一个错误道路的形象。

这是一个测试: 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>
小开

如果您在站点的其他任何地方重用这些 bg 图像作为表单输入，那么可能需要使用图像精灵。这样你可以集中管理你的图片(而不是 pic1，pic2，pic3等等。.).

对于客户端来说，Sprites 通常更快，因为它们只从服务器请求一个(尽管稍微大一点)文件，而不是多个文件。有关更多好处，请参阅 SO 文章:

CSS 图像精灵

不过，如果您只是在一个表单中使用这些表单，并且只有在用户请求联系表单时才想加载它们，那么这可能一点用都没有... ... 不过这可能有意义。

Http://www.alistapart.com/articles/sprites

小开

Http://css-tricks.com/snippets/css/css-only-image-preloading/

技巧一

将图像加载到元素的常规状态，只将其移动到背景位置。然后移动背景位置以在悬停时显示它。

#grass { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background-position: bottom left; }

技巧二

如果有问题的元素已经有一个背景图像应用，你需要改变该图像，以上将不工作。通常你会在这里找到一个精灵(一个组合的背景图像) ，然后移动背景位置。但如果那不可能，试试这个。将背景图像应用到另一个已经在使用但没有背景图像的页面元素。

#random-unsuspecting-element { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background: url(images/grass.png) no-repeat; }
小开

唯一的方法是对图像进行 Base64编码，并将其放在 HTML 代码中，这样它就不需要联系服务器来下载图像。

这个 将从 URL 对图像进行编码，这样您就可以复制图像文件代码并将其插入到页面中，如下所示..。

body {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}
小开

您可以使用这个 jQuery 插件 等待图像，也可以将图像放入一个隐藏的 div 或(宽度: 0，高度: 0)中，并对图像使用 onload 事件。

如果你只有像2-3图像，你可以绑定事件，并触发他们在一个链，以便每个图像之后，你可以做一些代码。

小开

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

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

这个巨大的好处是，你不需要更新它，当你带来新的背景图片在未来，它会发现新的和预装它们！

小开

仅使用 CSS 预加载图像

在下面的代码中，我随机选择了 body元素，因为它是页面上唯一保证存在的元素之一。

为了让“技巧”起作用，我们将使用 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
}

enter image description here

演示

最好使用 精灵形象来减少 http 请求... (如果有许多相对较小的图像) ，并确保图像托管在使用 HTTP2的地方。

小开

当没有办法为 :before或 :after伪元素修改 CSS 代码并用 CSS 规则预加载图像时，可以使用另一种方法，即用 JavaScript 代码遍历已加载样式表的 CSS 规则。例如，为了使它在 HTML 中工作，在关闭 body标记之前或者在样式表之后。

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
});
});
小开

使用 HTML < link > Tag 预加载图像

我相信这个问题的大多数访问者都在寻找 “如何在页面渲染开始前预加载图像?”的答案，而解决这个问题的最好方法就是使用 <link>标签，因为 <link>标签能够阻止页面的进一步渲染。见 先发制人

rel(当前文档与链接文档之间的关系)属性的这两个值选项与问题最相关:

  • 预取 : 在页面呈现时加载给定的资源
  • Preload : 在页面呈现开始之前加载给定的资源

因此，如果希望在 <body>标记的呈现过程开始之前加载资源(在这种情况下，它是一个图像) ，请使用:

<link rel="preload" as="image" href="IMAGE_URL">

如果你想在 <body>渲染的时候加载一个资源，但是你打算稍后动态地使用它，不想因为加载时间而打扰用户，使用:

<link rel="prefetch" href="RESOURCE_URL">
小开

我也想添加小通知。

如果您没有在网络选项卡上禁用开发控制台设置中的缓存，那么回答“只使用 CSS 预加载图像”会很好地工作。 否则它将双重加载图像。

enter image description here


提交答案