我可以"pre-load"带有JS的图像用作CSS背景图像吗？

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

如果是这样，如何？

你甚至不需要为此使用JS（缺点是延迟页面加载事件）。包括这样的东西：

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

这将触发对图像的请求，并将其添加到本地缓存中。设置 CSS 背景图像属性时，图像将已位于本地缓存中，从而消除了另一个请求的延迟。

或者，您可以通过在 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的预加载代码）

我不认为使用隐藏的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];
  }
}

虽然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正确缓存为单独的文件。

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

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

正如对

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

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

相关内容

最新更新

热门标签：