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＆＃39;回答上面的问题，一个特别大的背景图片可能应该在页面加载后作为隐藏的背景/通过JavaScript添加，因为内容图像延迟了window.onload的触发，因此可能会产生缓慢加载页面的感知。

鉴于听起来您仍然使用动态内容，这可能是一个可接受的解决方案。它还允许您根据需要以编程方式进行预加载，这可能更适合维护。

Answer 5

这个工作有一个很好的框架叫做Emerge.js http://ilyabirman.net/projects/emerge/

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

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

5 个答案: