Javascript 我可以用JS“预加载”一个图像作为CSS背景图像吗？

是否可以使用javascript将图像预先加载到页面中，以便随时将其用作CSS背景图像，而无需任何请求/上载延迟

---

如果是这样，怎么做？

您甚至不需要使用JS来实现这一点，其缺点是延迟页面加载事件。包括以下内容：

<img src="/path/to/image.jpg.png.gif.bmp" style="display: none" />

---

由于@rlemon提供了预加载代码，正如上面一些小猫的回答中的一个警告，在页面加载后，一个特别大的背景图像应该作为隐藏背景/通过JavaScript添加，因为内容图像延迟了window.onload的启动，因此可能会造成页面加载缓慢的感觉

---

考虑到听起来您正在使用动态内容，这可能是一个可接受的解决方案。它还允许您根据需要以编程方式进行预加载，这对维护来说可能更好。

我不认为使用隐藏的img标记是正确的方法，我宁愿使用一个新的Imgurl并附加一个onload事件，您可以将图像设置为所需元素的背景图像

img = new Image();
img.onload = function(){
  // set background-image
};
img.src = image_url;

请确保在附加onload之后放入img.src，否则可能会在附加事件之前加载映像

也许可以建立一个更完整的基础：

function preload(list, callback, imageCallback, errorCallback) {
  if (typeof(list) === "undefined"
      || list.length === 0) {
    return;
  }
  var len = list.length;
  var timers = {};
  var checkLen0 = function() {
    if (len === 0) {
      if (typeof(callback) === "function") {
        callback();
      }
      delete(timers)
    }
  }
  var onload = function() {
    clearTimeout(timers[img]);
    if (typeof(imageCallback) === "function") {
      imageCallback.call(img);
    }
    len--;
    checkLen0();
  }
  var onerror = function() {
    clearTimeout(timers[img]);
    if (typeof(errorCallback) === "function") {
      errorCallback.call(img);
    }
    len--;
    checkLen0();
  }
  for (var i = 0; i < list.length; i++ ) {
    var img = new Image();
    img.onload = onload;
    timers[img] = window.setTimeout(5000, onerror);
    img.src = list[i];
  }
}

---

虽然SomeKittens的答案是有效的，但它会延迟页面加载，正如Jimmy所评论的那样。如果您使用的是jquery，我会使用类似的方式来保持样式、结构和逻辑的分离：

---

当然，从那时起，您可以优化/更改它。这样做的好处是，您可以使用PHP动态创建脚本，并且可以将所有javascript作为一个单独的文件正确缓存。

有一个很好的框架用于此工作，名为Emerge.js

项目页面的报价：

---

Emerge.js是一个协调页面加载的框架。通常，当加载一个复杂的网页时，图像以随机顺序出现，导致不愉快的闪烁。要用漂亮协调的动画替换它，需要编程。Emerge.js无需编写任何Javascript代码，从而简化了任务。该框架使用声明性方法，为每个元素指定所需的行为，而不考虑实现。Emerge.js使用jQuery。

页面是在获取img之前还是之后完成加载动画？我会做一些测试，如果是在之后，我会考虑使用JavaScript或者页面会永远持续下去。load@jt0dd-您还可以在元素上设置背景图像，并为其提供背景位置/显示属性，使其不会呈现。@FranciscoPresencia-以这种方式添加到页面的图像将延迟window.onLoad，yesRisky，也许两次加载同一个图像？@Phaedra-不，除非响应中有一些标题，例如pragma指令，告诉UA不要麻烦缓存。你先搜索了吗？这就是为什么不应该使用onload，但是DOMContentLoaded@Pumbaa80-我相信用户在浏览器上看到“加载微调器”的时间比他们需要的时间长，这仍然是一个问题。老实说，我相信这是一个更好的策略。它允许您使用JS以编程方式将需要预加载的图像和它们添加到DOM中的图像绑定在一起。每次需要时手动添加图像可能会很快成为维护的地狱。请下载者解释一下，这个答案为什么没有帮助？嗯，我在问自己，这是否是一项有风险的业务，因为你可能过度使用这种方法，使较旧的浏览器响应速度降低，此外，在加载后台之前，您必须隐藏所有div内容，可能根本不需要下载投票者。我更改了数据src并将其放入，在javascript中使用了.html而不是attrdata src，以使其对较旧的浏览器更具响应性。此外，更改了javascript加载的背景图像位。还有什么需要改进的吗？数据src对我来说是一种更好的方式，也许在div元素中您需要一些内容。

img = new Image();
img.onload = function(){
  // set background-image
};
img.src = image_url;

function preload(list, callback, imageCallback, errorCallback) {
  if (typeof(list) === "undefined"
      || list.length === 0) {
    return;
  }
  var len = list.length;
  var timers = {};
  var checkLen0 = function() {
    if (len === 0) {
      if (typeof(callback) === "function") {
        callback();
      }
      delete(timers)
    }
  }
  var onload = function() {
    clearTimeout(timers[img]);
    if (typeof(imageCallback) === "function") {
      imageCallback.call(img);
    }
    len--;
    checkLen0();
  }
  var onerror = function() {
    clearTimeout(timers[img]);
    if (typeof(errorCallback) === "function") {
      errorCallback.call(img);
    }
    len--;
    checkLen0();
  }
  for (var i = 0; i < list.length; i++ ) {
    var img = new Image();
    img.onload = onload;
    timers[img] = window.setTimeout(5000, onerror);
    img.src = list[i];
  }
}

<style>
  .preload-img { display: none; }
</style>

...    

<div class = "preload-img">/path/to/image.jpg.png.gif.bmp</div>

...

<script>
$(document).ready(function(){
  $(".preload-img").each(function(){
    preloadImage = new Image();
    preloadImage.src = $(this).html();
    });
  });
</script>