javascript - 预加载背景图片

Question

我像这样在 javascript/jQuery 中循环浏览背景图片...

var duration = 2500;
var delay = 500;
var i = 0;

setInterval(function() {

  if (i == 0) {
    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1480/any')");
  }

  if (i == 1) {
    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1481/any')");
  }

  if (i == 2) {
    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1482/any')");
  }

  if (i == 3) {
    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1483/any')");
  }

  i++;

}, duration + delay)

.myimage {
  height: 500px;
  width: 500px;
  transition: background-image 1s linear;
  background-image: url('https://placeimg.com/1648/1488/any');
  background-size: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myimage">
</div>

问题是，我偶尔会出现没有图像的情况，我认为这是因为图像没有及时加载。有没有办法预加载它们？

Answer 1

您可以使用 CSS 预加载它们，例如:

body::after{
  position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
  content:url(https://placeimg.com/1640/1480/any) url(https://placeimg.com/1640/1481/any) url(https://placeimg.com/1640/1482/any) url(https://placeimg.com/1640/1483/any);
}

注意:您可以在 JS 代码中使用图像数组，并根据索引 i 更改它们。

var duration = 2500;
var delay = 500;
var i = 0;
var images = ['https://placeimg.com/1640/1480/any', 'https://placeimg.com/1640/1481/any', 'https://placeimg.com/1640/1482/any', 'https://placeimg.com/1640/1483/any'];

setInterval(function() {
  $(".myimage").css("background-image", "url(" + images[i] + ")");
  i++;
}, duration + delay)

.myimage {
  height: 500px;
  width: 500px;
  transition: background-image 1s linear;
  background-image: url('https://placeimg.com/1648/1488/any');
  background-size: cover;
}

body::after {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  content: url(https://placeimg.com/1640/1480/any) url(https://placeimg.com/1640/1481/any) url(https://placeimg.com/1640/1482/any) url(https://placeimg.com/1640/1483/any);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myimage">
</div>