仅使用CSS预加载图像

Question

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

谢谢你的支持。

Answer 1

仅使用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);
}

Demo

最好使用sprite image来减少http请求...
（如果有许多尺寸相对较小的图片）

Answer 2

我可以确认我的原始代码似乎有效。我随便用一条错误的路径贴着一张图片。

以下是测试：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>

Answer 3

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; }

Answer 4

使用HTML＆lt; link＆gt;预加载图片标签

我相信这个问题的大多数访问者都在寻找“如何在页面渲染开始之前预加载图像？”的答案，这个问题的最佳解决方案是使用{{ 1}}标记因为<link>标记能够阻止进一步呈现页面。见preemptive

<link>（当前文档与链接文档之间的关系）属性的这两个值选项与问题最相关：

预取：在页面呈现时加载给定资源
预加载：在页面呈现开始之前加载给定资源

因此，如果要在rel标记的呈现过程开始之前加载资源（在这种情况下，，它是图像），请使用：

<body>

如果您想在<link rel="preload" as="image" href="IMAGE_URL">正在渲染时加载资源但是您打算稍后动态使用它而不想用加载时间打扰用户，请使用：

<body>

Answer 5

试试这个：

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

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

Answer 6

如果您在网站上的其他任何位置重复使用这些bg图像进行表单输入，则可能需要使用图像精灵。这样你就可以集中管理你的图像（而不是pic1，pic2，pic3等......）。

Sprites通常对客户端来说更快，因为它们只从服务器请求一个（虽然稍大）文件而不是多个文件。有关更多好处，请参阅SO文章：

CSS image sprites

然后，如果您只是将这些用于一个表单，并且如果用户请求联系表单，您实际上只想加载它们，那么这可能没有任何帮助...但是可能有意义。

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

Answer 7

对于预加载使用CSS设置的背景图像，我提出的最有效的答案是我发现的某些代码的修改版本无效：

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

这样做的巨大好处是，当您将来引入新的背景图像时，您不需要更新它，它会找到新的背景图像并预加载它们！

Answer 8

如何在隐藏的地方加载背景图片。这样它将在页面打开时加载，并且在使用ajax创建表单后不会占用任何时间：

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

Answer 9

您可以使用此jQuery插件waitForImage，或者您可以将图像放入隐藏的div或（width：0和height：0）并在图像上使用onload事件。

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

Answer 10

当无法使用CSS :before或:after伪元素的规则修改CSS代码和预加载图像时，可以使用另一种使用JavaScript代码遍历加载样式表的CSS规则的方法。例如，在关闭body代码之前或仅在样式表之后使其在HTML中工作scripts should be included after stylesheets。

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

Answer 11

如果页面元素及其背景图像已经在DOM中（即您没有动态创建/更改它们），那么它们的背景图像将已经加载。此时，您可能希望查看压缩方法：）

Answer 12

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

This将对来自网址的图片进行编码，以便您可以复制图片文件代码并将其插入您的页面中，如此...

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

Answer 13

我还想添加一个小通知。

如果您没有在网络选项卡的开发控制台设置中禁用缓存，则回答“仅使用 CSS 预加载图像”非常有效。否则它会双重加载图像。

预加载CSS图像

13 个答案:

仅使用CSS预加载图像

Demo

使用HTML＆lt; link＆gt;预加载图片标签