我可以使用JS“预加载”图像以用作CSS背景图像吗？

Question

是否可以使用javascript抢先将图像加载到页面中，以便可以随时将它们用作CSS背景图像， 而没有任何请求/上传延迟 ？

如果是这样，怎么办？

Answer 1

您甚至不需要为此使用JS（不利于延迟页面加载事件）。 包括以下内容：

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

这将触发对图像的请求，并将其添加到本地缓存。 设置CSS background-image属性时，该图像将已经在本地缓存中，从而消除了另一个请求的延迟。

另外，您可以通过在JavaScript中创建图像来完成同一件事，而不会延迟页面加载（此解决方案允许多个图像）：

function preload(list, callback, imageCallback) {
    var at, len;
    at = len = list.length;
    for (var i = 0; i < len; i++ ) {
        var img = new Image();
        img.onload = function() {
            if( imageCallback ) {
                imageCallback.call(this, this, len-at, len);
            }
            if( !--at ) {
                callback(list);
            }
        };
        img.src = list[i];
        list[i] = img;
    }
}

您可以通过以下方式致电：

var list = preload(["1.png","2.png","3.png" ... ], function complete(list) {
   console.log('images all loaded!');
}, function loaded(image, index, listCount) {
   console.log('image ' + index + ' of + 'listCount + 'is loaded');
});

（感谢@rlemon的预加载代码）

Answer 2

我不认为使用隐藏的img标签是正确的方法，我宁愿使用“ new Img（url）”并将其附加到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];
  }
}

Answer 3

尽管SomeKittens答案有效，但它会延迟页面加载，如Jimmy所评论。 如果您使用的是jQuery，那么我会选择这样的方法来保持样式，结构和逻辑的分离 ：

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

当然，从那里您可以对其进行优化/更改。 这样做的好处是， 您可以使用PHP动态创建<div> ，并且可以将所有JavaScript适当地缓存为单独的文件 。

Answer 4

就像对上面SomeKittens的回答的警告一样，可能会在页面加载后通过JavaScript将特别大的背景图像添加为隐藏背景/ JavaScript，因为内容图像会延迟window.onload的触发，因此可能会导致加载缓慢页。

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

Answer 5

此工作有一个出色的框架，称为Emerge.js http://ilyabirman.net/projects/emerge/

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